gridsum-vue3-pc 1.0.0

package/template/base/src/views/Role.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="role-container">
+    <el-card shadow="never">
+      <div class="toolbar">
+        <el-input
+          v-model="keyword"
+          :placeholder="$t('role.searchPlaceholder')"
+          clearable
+          style="width: 300px"
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+        <div class="toolbar-right">
+          <el-button v-if="selectedIds.length" type="danger" @click="handleBatchDelete">
+            <el-icon><Delete /></el-icon>
+            {{ $t('common.batchDelete') }} ({{ selectedIds.length }})
+          </el-button>
+          <el-button type="primary" @click="openAdd">
+            <el-icon><Plus /></el-icon>
+            {{ $t('role.addRole') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-table
+        :data="list"
+        v-loading="loading"
+        stripe
+        style="width: 100%"
+        @selection-change="onSelectionChange"
+      >
+        <el-table-column type="selection" width="50" />
+        <el-table-column prop="name" :label="$t('role.name')" min-width="130" />
+        <el-table-column prop="code" :label="$t('role.code')" min-width="130" />
+        <el-table-column prop="description" :label="$t('role.description')" min-width="200" />
+        <el-table-column prop="permissions" :label="$t('role.permissions')" min-width="280">
+          <template #default="{ row }">
+            <el-tag
+              v-for="perm in row.permissions"
+              :key="perm"
+              size="small"
+              style="margin-right: 5px; margin-bottom: 5px"
+            >
+              {{ getPermissionName(perm) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('role.createTime')" min-width="160" />
+        <el-table-column :label="$t('common.actions')" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="openEdit(row)">{{ $t('common.edit') }}</el-button>
+            <el-button type="danger" link @click="handleDelete(row)">{{ $t('common.delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div v-if="!loading && list.length === 0" style="padding: 40px 0">
+        <el-empty :description="$t('common.noData')" />
+      </div>
+
+      <el-pagination
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        style="margin-top: 20px; justify-content: flex-end"
+      />
+    </el-card>
+
+    <el-dialog v-model="dialogVisible" :title="isEdit ? $t('role.editRole') : $t('role.addRole')" width="600px">
+      <el-form :model="form" :rules="formRules" ref="formRef" label-width="80px">
+        <el-form-item :label="$t('role.name')" prop="name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item :label="$t('role.code')" prop="code">
+          <el-input v-model="form.code" :disabled="isEdit" />
+        </el-form-item>
+        <el-form-item :label="$t('role.description')" prop="description">
+          <el-input v-model="form.description" type="textarea" :rows="3" />
+        </el-form-item>
+        <el-form-item :label="$t('role.permissions')" prop="permissions">
+          <el-checkbox-group v-model="form.permissions">
+            <el-checkbox v-for="perm in allPermissions" :key="perm.code" :value="perm.code">
+              {{ perm.name }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="loading" @click="handleSubmit">{{ $t('common.confirm') }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Search, Plus, Delete } from '@element-plus/icons-vue';
+import { useCrud } from '@/composables/useCrud';
+
+interface RoleForm {
+  id: string;
+  name: string;
+  code: string;
+  description: string;
+  permissions: string[];
+}
+
+const { t } = useI18n();
+
+const formRules = computed(() => ({
+  name: [{ required: true, message: t('role.requiredName'), trigger: 'blur' }],
+  code: [{ required: true, message: t('role.requiredCode'), trigger: 'blur' }],
+}));
+
+const allPermissions = computed(() => [
+  { name: t('role.permUserView'), code: 'user:view' },
+  { name: t('role.permUserAdd'), code: 'user:add' },
+  { name: t('role.permUserEdit'), code: 'user:edit' },
+  { name: t('role.permUserDelete'), code: 'user:delete' },
+  { name: t('role.permRoleView'), code: 'role:view' },
+  { name: t('role.permRoleAdd'), code: 'role:add' },
+  { name: t('role.permRoleEdit'), code: 'role:edit' },
+  { name: t('role.permRoleDelete'), code: 'role:delete' },
+]);
+
+const crud = useCrud<RoleForm>({
+  url: '/roles',
+  name: 'role',
+  formDefaults: {
+    id: '',
+    name: '',
+    code: '',
+    description: '',
+    permissions: [],
+  },
+  rules: formRules.value,
+});
+
+const {
+  list,
+  loading,
+  page,
+  pageSize,
+  total,
+  keyword,
+  dialogVisible,
+  isEdit,
+  selectedIds,
+  formRef,
+  form,
+  fetchData,
+  handleSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  openAdd,
+  openEdit,
+  handleDelete,
+  handleBatchDelete,
+  handleSubmit,
+} = crud;
+
+const getPermissionName = (code: string) => {
+  const perm = allPermissions.value.find((p) => p.code === code);
+  return perm ? perm.name : code;
+};
+
+const onSelectionChange = (rows: any[]) => {
+  selectedIds.value = rows.map((r: any) => r.id);
+};
+
+onMounted(() => fetchData());
+</script>
+
+<style scoped>
+.role-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+:deep(.el-card) {
+  border-radius: 12px;
+  width: 100%;
+}
+
+:deep(.el-table) {
+  width: 100%;
+}
+
+:deep(.el-table th.el-table__cell) {
+  font-weight: 600;
+}
+
+:deep(.el-table__body tr) {
+  transition: background 0.2s ease;
+}
+
+:deep(.el-table__body tr:hover) {
+  background: rgba(64, 158, 255, 0.04) !important;
+}
+
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped:hover) {
+  background: rgba(64, 158, 255, 0.06) !important;
+}
+
+:deep(.el-pagination) {
+  padding: 16px 0 4px;
+}
+
+:deep(.el-dialog) {
+  border-radius: 12px;
+}
+
+:deep(.el-dialog__header) {
+  margin-right: 0;
+  padding: 20px 24px 0;
+}
+
+:deep(.el-dialog__body) {
+  padding: 20px 24px;
+}
+
+:deep(.el-dialog__footer) {
+  padding: 0 24px 20px;
+  border-top: none;
+}
+
+:deep(.el-checkbox-group) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+html.dark .toolbar :deep(.el-input__wrapper) {
+  background: #161b22;
+  box-shadow: 0 0 0 1px #30363d inset;
+}
+
+
+
+html.dark :deep(.el-dialog .el-input__wrapper) {
+  background: #0d1117;
+  box-shadow: 0 0 0 1px #30363d inset;
+}
+</style>

package/template/base/src/views/User.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="user-container">
+    <el-card shadow="never">
+      <div class="toolbar">
+        <el-input
+          v-model="keyword"
+          :placeholder="$t('user.searchPlaceholder')"
+          clearable
+          style="width: 300px"
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+        <div class="toolbar-right">
+          <el-button v-if="selectedIds.length" type="danger" @click="handleBatchDelete">
+            <el-icon><Delete /></el-icon>
+            {{ $t('common.batchDelete') }} ({{ selectedIds.length }})
+          </el-button>
+          <el-button @click="exportData">
+            <el-icon><Download /></el-icon>
+            {{ $t('common.export') }}
+          </el-button>
+          <el-button type="primary" @click="openAdd">
+            <el-icon><Plus /></el-icon>
+            {{ $t('user.addUser') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-table
+        :data="list"
+        v-loading="loading"
+        stripe
+        style="width: 100%"
+        @selection-change="onSelectionChange"
+      >
+        <el-table-column type="selection" width="50" />
+        <el-table-column prop="username" :label="$t('user.username')" min-width="120" />
+        <el-table-column prop="name" :label="$t('user.name')" min-width="120" />
+        <el-table-column prop="email" :label="$t('user.email')" min-width="160" />
+        <el-table-column prop="phone" :label="$t('user.phone')" min-width="120" />
+        <el-table-column prop="role" :label="$t('user.role')" min-width="90">
+          <template #default="{ row }">
+            <el-tag :type="getRoleTagType(row.role)">
+              {{ getRoleName(row.role) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" :label="$t('user.status')" min-width="70">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
+              {{ row.status === 1 ? $t('common.enable') : $t('common.disable') }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('user.createTime')" min-width="160" />
+        <el-table-column :label="$t('common.actions')" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="openEdit(row)">{{ $t('common.edit') }}</el-button>
+            <el-button type="danger" link @click="handleDelete(row)">{{ $t('common.delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div v-if="!loading && list.length === 0" style="padding: 40px 0">
+        <el-empty :description="$t('common.noData')" />
+      </div>
+
+      <el-pagination
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        style="margin-top: 20px; justify-content: flex-end"
+      />
+    </el-card>
+
+    <el-dialog v-model="dialogVisible" :title="isEdit ? $t('user.editUser') : $t('user.addUser')" width="500px">
+      <el-form :model="form" :rules="formRules" ref="formRef" label-width="80px">
+        <el-form-item :label="$t('user.username')" prop="username">
+          <el-input v-model="form.username" :disabled="isEdit" />
+        </el-form-item>
+        <el-form-item :label="$t('user.name')" prop="name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item :label="$t('user.email')" prop="email">
+          <el-input v-model="form.email" />
+        </el-form-item>
+        <el-form-item :label="$t('user.phone')" prop="phone">
+          <el-input v-model="form.phone" />
+        </el-form-item>
+        <el-form-item :label="$t('user.role')" prop="role">
+          <el-select v-model="form.role" style="width: 100%">
+            <el-option v-for="r in roleOptions" :key="r.code" :label="r.name" :value="r.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('user.status')" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio :value="1">{{ $t('common.enable') }}</el-radio>
+            <el-radio :value="0">{{ $t('common.disable') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="loading" @click="handleSubmit">{{ $t('common.confirm') }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Search, Plus, Delete, Download } from '@element-plus/icons-vue';
+import { useCrud } from '@/composables/useCrud';
+import http from '@/services/http';
+
+interface UserForm {
+  id: string;
+  username: string;
+  name: string;
+  email: string;
+  phone: string;
+  role: string;
+  status: number;
+}
+
+const { t } = useI18n();
+
+const formRules = computed(() => ({
+  username: [{ required: true, message: t('user.requiredUsername'), trigger: 'blur' }],
+  name: [{ required: true, message: t('user.requiredName'), trigger: 'blur' }],
+  email: [
+    { required: true, message: t('user.requiredEmail'), trigger: 'blur' },
+    { type: 'email', message: t('user.invalidEmail'), trigger: 'blur' },
+  ],
+}));
+
+const crud = useCrud<UserForm>({
+  url: '/users',
+  name: 'user',
+  formDefaults: {
+    id: '',
+    username: '',
+    name: '',
+    email: '',
+    phone: '',
+    role: 'user',
+    status: 1,
+  },
+  rules: formRules.value,
+});
+
+const {
+  list,
+  loading,
+  page,
+  pageSize,
+  total,
+  keyword,
+  dialogVisible,
+  isEdit,
+  selectedIds,
+  formRef,
+  form,
+  fetchData,
+  handleSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  openAdd,
+  openEdit,
+  handleDelete,
+  handleBatchDelete,
+  handleSubmit,
+} = crud;
+
+interface RoleOption {
+  code: string;
+  name: string;
+}
+
+const roleOptions = ref<RoleOption[]>([]);
+
+const fetchRoles = async () => {
+  try {
+    const res: any = await http.get('/roles', { params: { all: true } });
+    if (res.code === 0 || res.code === 200) {
+      roleOptions.value = res.data;
+    }
+  } catch {
+    // fallback
+  }
+};
+
+const getRoleName = (roleCode: string) => {
+  const found = roleOptions.value.find((r: any) => r.code === roleCode);
+  return found ? found.name : roleCode;
+};
+
+const getRoleTagType = (roleCode: string) => {
+  if (roleCode === 'admin') return 'danger';
+  if (roleCode === 'guest') return 'info';
+  return 'primary';
+};
+
+const onSelectionChange = (rows: any[]) => {
+  selectedIds.value = rows.map((r: any) => r.id);
+};
+
+const csvEscape = (val: any) => {
+  const s = String(val ?? '');
+  if (s.includes(',') || s.includes('"') || s.includes('\n')) {
+    return `"${s.replace(/"/g, '""')}"`;
+  }
+  return s;
+};
+
+const exportData = async () => {
+  try {
+    const res: any = await http.get('/users/export');
+    if (res.code === 0 || res.code === 200) {
+      const exportList = res.data.list;
+      const headers = ['username', 'name', 'email', 'phone', 'roleName', 'status', 'createTime'];
+      const labels = headers.map((h) => t(`user.${h === 'roleName' ? 'role' : h}`));
+      const rows = exportList.map((item: any) => headers.map((h) => csvEscape(item[h])));
+      const csv = [labels.join(','), ...rows.map((r: any[]) => r.join(','))].join('\n');
+      const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `users_${new Date().toISOString().slice(0, 10)}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  } catch {
+    ElMessage.error(t('common.error'));
+  }
+};
+
+onMounted(() => {
+  fetchData();
+  fetchRoles();
+});
+</script>
+
+<style scoped>
+.user-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+:deep(.el-card) {
+  border-radius: 12px;
+  width: 100%;
+}
+
+:deep(.el-table) {
+  width: 100%;
+}
+
+:deep(.el-table th.el-table__cell) {
+  font-weight: 600;
+}
+
+:deep(.el-table__body tr) {
+  transition: background 0.2s ease;
+}
+
+:deep(.el-table__body tr:hover) {
+  background: rgba(64, 158, 255, 0.04) !important;
+}
+
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped:hover) {
+  background: rgba(64, 158, 255, 0.06) !important;
+}
+
+:deep(.el-pagination) {
+  padding: 16px 0 4px;
+}
+
+:deep(.el-dialog) {
+  border-radius: 12px;
+}
+
+:deep(.el-dialog__header) {
+  margin-right: 0;
+  padding: 20px 24px 0;
+}
+
+:deep(.el-dialog__body) {
+  padding: 20px 24px;
+}
+
+:deep(.el-dialog__footer) {
+  padding: 0 24px 20px;
+  border-top: none;
+}
+
+html.dark .toolbar :deep(.el-input__wrapper) {
+  background: #161b22;
+  box-shadow: 0 0 0 1px #30363d inset;
+}
+
+
+
+html.dark :deep(.el-dialog .el-input__wrapper) {
+  background: #0d1117;
+  box-shadow: 0 0 0 1px #30363d inset;
+}
+</style>

package/template/base/src/views/error/Forbidden.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="error-page">
+    <div class="error-content">
+      <div class="error-icon">
+        <svg viewBox="0 0 80 80" width="80" height="80">
+          <rect x="10" y="30" width="60" height="40" rx="4" fill="none" stroke="#e6a23c" stroke-width="3" opacity="0.2" />
+          <rect x="10" y="30" width="60" height="40" rx="4" fill="none" stroke="#e6a23c" stroke-width="3" />
+          <line x1="22" y1="42" x2="58" y2="42" stroke="#e6a23c" stroke-width="2" />
+          <line x1="22" y1="50" x2="48" y2="50" stroke="#e6a23c" stroke-width="2" />
+          <line x1="22" y1="58" x2="38" y2="58" stroke="#e6a23c" stroke-width="2" />
+          <text x="65" y="24" text-anchor="middle" font-size="18" font-weight="700" fill="#e6a23c">403</text>
+        </svg>
+      </div>
+      <h1 class="error-title">{{ $t('error.forbiddenTitle') }}</h1>
+      <p class="error-desc">{{ $t('error.forbiddenDesc') }}</p>
+      <el-button type="primary" round @click="$router.push('/')">
+        {{ $t('error.backHome') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.error-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 40px;
+}
+
+.error-content {
+  text-align: center;
+  max-width: 420px;
+}
+
+.error-icon {
+  margin-bottom: 24px;
+}
+
+.error-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1a1a2e;
+  margin: 0 0 12px;
+}
+
+.error-desc {
+  font-size: 14px;
+  color: #909399;
+  margin: 0 0 32px;
+  line-height: 1.6;
+}
+
+html.dark .error-title {
+  color: #c9d1d9;
+}
+
+html.dark .error-desc {
+  color: #8b949e;
+}
+</style>