feat: add workspace role permission check, hide non permission action

src/client/components/feed/FeedArchivePageButton.tsx

@@ -3,7 +3,7 @@ import { Button } from '../ui/button';
 import { LuArchive, LuArchiveRestore } from 'react-icons/lu';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { AppRouterOutput, trpc } from '@/api/trpc';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { DynamicVirtualList } from '../DynamicVirtualList';
 import { get } from 'lodash-es';
 import { FeedEventItem } from './FeedEventItem';
@@ -28,6 +28,7 @@ export const FeedArchivePageButton: React.FC<FeedArchivePageButtonProps> =
     const clearAllArchivedEventsMutation =
       trpc.feed.clearAllArchivedEvents.useMutation();
     const trpcUtils = trpc.useUtils();
+    const hasAdminPermission = useHasAdminPermission();
 
     const {
       data,
@@ -87,9 +88,11 @@ export const FeedArchivePageButton: React.FC<FeedArchivePageButtonProps> =
           <div className="flex items-center justify-between">
             <h1 className="text-lg font-bold">{t('Archived Events')}</h1>
 
+            {hasAdminPermission && (
               <AlertConfirm onConfirm={handleClear}>
                 <Button size="sm">{t('Clear')}</Button>
               </AlertConfirm>
+            )}
           </div>
 
           <Separator className="my-2" />

src/client/components/monitor/MonitorInfo.tsx

@@ -6,7 +6,7 @@ import {
   defaultSuccessHandler,
   trpc,
 } from '../../api/trpc';
-import { useCurrentWorkspaceId } from '../../store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '../../store/user';
 import { Loading } from '../Loading';
 import { getMonitorLink } from './provider';
 import { NotFoundTip } from '../NotFoundTip';
@@ -35,6 +35,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
   const navigate = useNavigate();
   const [showBadge, setShowBadge] = useState(false);
   const isMobile = useIsMobile();
+  const hasAdminPermission = useHasAdminPermission();
 
   const {
     data: monitorInfo,
@@ -186,6 +187,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
                 </span>
               </div>
 
+              {hasAdminPermission && (
                 <div className="flex gap-2">
                   <Button
                     type="primary"
@@ -256,6 +258,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
                     />
                   </Modal>
                 </div>
+              )}
             </Space>
 
             <div className="text-black text-opacity-75 dark:text-gray-200">
@@ -298,6 +301,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
             <MonitorDataChart monitorId={monitorId} />
           </Card>
 
+          {hasAdminPermission && (
             <div className="text-right">
               <Dropdown
                 trigger={['click']}
@@ -321,6 +325,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
                 </Button>
               </Dropdown>
             </div>
+          )}
 
           <MonitorEventList monitorId={monitorId} />
         </Space>

src/client/components/monitor/StatusPage/useAllowEdit.ts

@@ -15,5 +15,5 @@ export function useAllowEdit(workspaceId?: string): boolean {
     }
   );
 
-  return role === ROLES.owner;
+  return role === ROLES.owner || role === ROLES.admin;
 }

src/client/components/website/WebsiteLighthouseBtn.tsx

@@ -20,13 +20,14 @@ import {
   SheetTrigger,
 } from '../ui/sheet';
 import { defaultErrorHandler, defaultSuccessHandler, trpc } from '@/api/trpc';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasPermission } from '@/store/user';
 import { formatDate } from '@/utils/date';
 import { Input } from '../ui/input';
 import { toast } from 'sonner';
 import { useEvent } from '@/hooks/useEvent';
 import { Badge } from '../ui/badge';
 import { LuArrowRight, LuPlus } from 'react-icons/lu';
+import { ROLES } from '@tianji/shared';
 
 interface WebsiteLighthouseBtnProps {
   websiteId: string;
@@ -37,6 +38,7 @@ export const WebsiteLighthouseBtn: React.FC<WebsiteLighthouseBtnProps> =
     const { t } = useTranslation();
     const [url, setUrl] = useState('');
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+    const hasAdminPermission = useHasPermission(ROLES.admin);
 
     const { data, hasNextPage, fetchNextPage, isFetchingNextPage, refetch } =
       trpc.website.getLighthouseReport.useInfiniteQuery(
@@ -92,6 +94,7 @@ export const WebsiteLighthouseBtn: React.FC<WebsiteLighthouseBtnProps> =
           </SheetHeader>
 
           <div className="mt-2 flex flex-col gap-2">
+            {hasAdminPermission && (
               <div>
                 <Dialog
                   open={isCreateDialogOpen}
@@ -108,7 +111,9 @@ export const WebsiteLighthouseBtn: React.FC<WebsiteLighthouseBtnProps> =
                   </DialogTrigger>
                   <DialogContent>
                     <DialogHeader>
-                    <DialogTitle>{t('Generate Lighthouse Report')}</DialogTitle>
+                      <DialogTitle>
+                        {t('Generate Lighthouse Report')}
+                      </DialogTitle>
                       <DialogDescription>
                         {t('Its will take a while to generate the report.')}
                       </DialogDescription>
@@ -133,6 +138,7 @@ export const WebsiteLighthouseBtn: React.FC<WebsiteLighthouseBtnProps> =
                   </DialogContent>
                 </Dialog>
               </div>
+            )}
 
             <div className="flex flex-col gap-2">
               {allData.map((report) => {

src/client/routes/feed.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -32,6 +32,7 @@ function PageComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = channels.map((item) => ({
     id: item.id,
@@ -68,6 +69,8 @@ function PageComponent() {
             <CommonHeader
               title={t('Feed')}
               actions={
+                <>
+                  {hasAdminPermission && (
                     <Button
                       className={cn(pathname === '/feed/add' && '!bg-muted')}
                       variant="outline"
@@ -76,6 +79,8 @@ function PageComponent() {
                     >
                       {t('Add')}
                     </Button>
+                  )}
+                </>
               }
             />
           }

src/client/routes/feed/$channelId/index.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/api/trpc';
 import { CommonHeader } from '@/components/CommonHeader';
 import { CommonWrapper } from '@/components/CommonWrapper';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -46,6 +46,7 @@ function PageComponent() {
     workspaceId,
     channelId,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const {
     data,
@@ -53,7 +54,6 @@ function PageComponent() {
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-    refetch,
   } = trpc.feed.fetchEventsByCursor.useInfiniteQuery(
     {
       workspaceId,
@@ -122,6 +122,7 @@ function PageComponent() {
 
               <FeedArchivePageButton channelId={channelId} />
 
+              {hasAdminPermission && (
                 <Button
                   variant="outline"
                   size="icon"
@@ -135,7 +136,9 @@ function PageComponent() {
                     })
                   }
                 />
+              )}
 
+              {hasAdminPermission && (
                 <AlertConfirm
                   title={t('Confirm to delete this channel?')}
                   description={t('All feed will be remove')}
@@ -144,6 +147,7 @@ function PageComponent() {
                 >
                   <Button variant="outline" size="icon" Icon={LuTrash} />
                 </AlertConfirm>
+              )}
             </div>
           }
         />
@@ -174,6 +178,7 @@ function PageComponent() {
                     </Button>
                   )}
 
+                  {hasAdminPermission && (
                     <Button
                       size="icon"
                       variant="secondary"
@@ -182,6 +187,7 @@ function PageComponent() {
                     >
                       <LuArchive size={12} />
                     </Button>
+                  )}
                 </>
               }
             />

src/client/routes/monitor.tsx

@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -34,6 +34,7 @@ function MonitorComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = data.map((item) => ({
     id: item.id,
@@ -78,6 +79,8 @@ function MonitorComponent() {
             <CommonHeader
               title={t('Monitor')}
               actions={
+                <>
+                  {hasAdminPermission && (
                     <Button
                       className={cn(pathname === '/monitor/add' && '!bg-muted')}
                       variant="outline"
@@ -86,6 +89,8 @@ function MonitorComponent() {
                     >
                       {t('Add')}
                     </Button>
+                  )}
+                </>
               }
             />
           }

src/client/routes/monitor/$monitorId/index.tsx

@@ -13,7 +13,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -34,6 +34,7 @@ function MonitorDetailComponent() {
   });
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const hasAdminPermission = useHasAdminPermission();
 
   if (!monitorId) {
     return <ErrorTip />;
@@ -53,8 +54,13 @@ function MonitorDetailComponent() {
         <CommonHeader
           title={monitor.name}
           actions={
+            <>
+              {hasAdminPermission && (
                 <DropdownMenu>
-              <DropdownMenuTrigger asChild={true} className="cursor-pointer">
+                  <DropdownMenuTrigger
+                    asChild={true}
+                    className="cursor-pointer"
+                  >
                     <Button variant="outline" size="icon" className="shrink-0">
                       <LuMoreVertical />
                     </Button>
@@ -82,6 +88,8 @@ function MonitorDetailComponent() {
                     </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
+              )}
+            </>
           }
         />
       }

src/client/routes/page.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -32,6 +32,7 @@ function PageComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = data.map((item) => ({
     id: item.id,
@@ -68,6 +69,8 @@ function PageComponent() {
             <CommonHeader
               title={t('Pages')}
               actions={
+                <>
+                  {hasAdminPermission && (
                     <Button
                       className={cn(pathname === '/page/add' && '!bg-muted')}
                       variant="outline"
@@ -76,6 +79,8 @@ function PageComponent() {
                     >
                       {t('Add')}
                     </Button>
+                  )}
+                </>
               }
             />
           }

src/client/routes/page/$slug.tsx

@@ -8,6 +8,7 @@ import { NotFoundTip } from '@/components/NotFoundTip';
 import { MonitorStatusPage } from '@/components/monitor/StatusPage';
 import { Button } from '@/components/ui/button';
 import { useEvent } from '@/hooks/useEvent';
+import { useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { Link, createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -26,6 +27,7 @@ function PageComponent() {
     slug,
   });
   const trpcUtils = trpc.useUtils();
+  const hasAdminPermission = useHasAdminPermission();
 
   const deletePageMutation = trpc.monitor.deletePage.useMutation();
 
@@ -68,6 +70,7 @@ function PageComponent() {
           title={pageInfo.title}
           actions={
             <div className="space-x-2">
+              {hasAdminPermission && (
                 <AlertConfirm
                   title={t('Confirm to delete this page?')}
                   content={t('It will permanently delete the relevant data')}
@@ -75,6 +78,7 @@ function PageComponent() {
                 >
                   <Button variant="outline" size="icon" Icon={LuTrash} />
                 </AlertConfirm>
+              )}
 
               <Link to="/status/$slug" params={{ slug }} target="_blank">
                 <Button variant="outline" Icon={LuEye}>

src/client/routes/settings/notifications.tsx

@@ -11,10 +11,11 @@ import {
   NotificationInfoModal,
 } from '../../components/modals/NotificationInfo';
 import { useEvent } from '../../hooks/useEvent';
-import { useCurrentWorkspaceId } from '../../store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '../../store/user';
 import { CommonHeader } from '@/components/CommonHeader';
 import { Button } from '@/components/ui/button';
 import { LuFileEdit, LuPlus, LuTrash2 } from 'react-icons/lu';
+import { compact } from 'lodash-es';
 
 export const Route = createFileRoute('/settings/notifications')({
   beforeLoad: routeAuthBeforeLoad,
@@ -31,6 +32,7 @@ function PageComponent() {
   const [editingFormData, setEditingFormData] = useState<
     NotificationFormValues | undefined
   >(undefined);
+  const hasAdminPermission = useHasAdminPermission();
 
   const upsertMutation = trpc.notification.upsert.useMutation();
   const deleteMutation = trpc.notification.delete.useMutation();
@@ -69,6 +71,7 @@ function PageComponent() {
           title={t('Notifications')}
           actions={
             <>
+              {hasAdminPermission && (
                 <Button
                   variant="outline"
                   Icon={LuPlus}
@@ -76,6 +79,7 @@ function PageComponent() {
                 >
                   {t('New')}
                 </Button>
+              )}
             </>
           }
         />
@@ -88,7 +92,8 @@ function PageComponent() {
             dataSource={list}
             renderItem={(item) => (
               <List.Item
-                actions={[
+                actions={compact([
+                  hasAdminPermission && (
                     <Button
                       variant="default"
                       Icon={LuFileEdit}
@@ -102,7 +107,9 @@ function PageComponent() {
                       }}
                     >
                       {t('Edit')}
-                  </Button>,
+                    </Button>
+                  ),
+                  hasAdminPermission && (
                     <Popconfirm
                       title={t('Is delete this item?')}
                       okButtonProps={{
@@ -115,8 +122,9 @@ function PageComponent() {
                       <Button variant="destructive" size="icon">
                         <LuTrash2 />
                       </Button>
-                  </Popconfirm>,
+                    </Popconfirm>
-                ]}
+                  ),
+                ])}
               >
                 <List.Item.Meta title={item.name} />
               </List.Item>

src/client/routes/settings/workspace.tsx

@@ -3,7 +3,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { useTranslation } from '@i18next-toolkit/react';
 import { CommonWrapper } from '@/components/CommonWrapper';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { useCurrentWorkspace } from '../../store/user';
+import { useCurrentWorkspace, useHasAdminPermission } from '../../store/user';
 import { CommonHeader } from '@/components/CommonHeader';
 import {
   Card,
@@ -39,6 +39,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { AlertConfirm } from '@/components/AlertConfirm';
 import { ROLES } from '@tianji/shared';
+import { cn } from '@/utils/style';
 
 export const Route = createFileRoute('/settings/workspace')({
   beforeLoad: routeAuthBeforeLoad,
@@ -57,6 +58,7 @@ const columnHelper = createColumnHelper<MemberInfo>();
 function PageComponent() {
   const { t } = useTranslation();
   const { id: workspaceId, name, role } = useCurrentWorkspace();
+  const hasAdminPermission = useHasAdminPermission();
   const { data: members = [], refetch: refetchMembers } =
     trpc.workspace.members.useQuery({
       workspaceId,
@@ -128,6 +130,10 @@ function PageComponent() {
               {t('Current Workspace:')} {name}
             </CardHeader>
             <CardContent>
+              <div>
+                <span className="mr-2">{t('Current Role')}:</span>
+                <span className="font-semibold">{role}</span>
+              </div>
               <div>
                 <span className="mr-2">{t('Workspace ID')}:</span>
                 <span>
@@ -140,7 +146,10 @@ function PageComponent() {
           </Card>
 
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(handleInvite)}>
+            <form
+              onSubmit={form.handleSubmit(handleInvite)}
+              className={cn(!hasAdminPermission && 'opacity-50')}
+            >
               <Card>
                 <CardHeader className="text-lg font-bold">
                   {t('Invite new members by email address')}
@@ -166,7 +175,11 @@ function PageComponent() {
                 </CardContent>
 
                 <CardFooter>
-                  <Button type="submit" loading={isLoading}>
+                  <Button
+                    type="submit"
+                    loading={isLoading}
+                    disabled={!hasAdminPermission}
+                  >
                     {t('Invite')}
                   </Button>
                 </CardFooter>

src/client/routes/survey.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -35,6 +35,7 @@ function PageComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = data.map((item) => ({
     id: item.id,
@@ -71,6 +72,8 @@ function PageComponent() {
             <CommonHeader
               title={t('Survey')}
               actions={
+                <>
+                  {hasAdminPermission && (
                     <Button
                       className={cn(pathname === '/survey/add' && '!bg-muted')}
                       variant="outline"
@@ -79,6 +82,8 @@ function PageComponent() {
                     >
                       {t('Add')}
                     </Button>
+                  )}
+                </>
               }
             />
           }

src/client/routes/survey/$surveyId/index.tsx

@@ -6,8 +6,7 @@ import {
 } from '@/api/trpc';
 import { CommonHeader } from '@/components/CommonHeader';
 import { CommonWrapper } from '@/components/CommonWrapper';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
-import { useCurrentWorkspaceId } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -16,12 +15,11 @@ import { AlertConfirm } from '@/components/AlertConfirm';
 import { LuPencil, LuTrash } from 'react-icons/lu';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { DataTable, createColumnHelper } from '@/components/DataTable';
+import { createColumnHelper } from '@/components/DataTable';
 import { useMemo } from 'react';
 import { SurveyDownloadBtn } from '@/components/survey/SurveyDownloadBtn';
 import dayjs from 'dayjs';
 import { SurveyUsageBtn } from '@/components/survey/SurveyUsageBtn';
-import { Scrollbar } from '@radix-ui/react-scroll-area';
 import { VirtualizedInfiniteDataTable } from '@/components/VirtualizedInfiniteDataTable';
 import { Loading } from '@/components/Loading';
 
@@ -39,6 +37,7 @@ function PageComponent() {
   const { surveyId } = Route.useParams<{ surveyId: string }>();
   const workspaceId = useCurrentWorkspaceId();
   const { t } = useTranslation();
+  const hasAdminPermission = useHasAdminPermission();
   const { data: info } = trpc.survey.get.useQuery({
     workspaceId,
     surveyId,
@@ -105,6 +104,7 @@ function PageComponent() {
           title={info?.name ?? ''}
           actions={
             <div className="space-x-2">
+              {hasAdminPermission && (
                 <Button
                   variant="outline"
                   size="icon"
@@ -118,18 +118,24 @@ function PageComponent() {
                     })
                   }
                 />
+              )}
 
+              {hasAdminPermission && (
                 <AlertConfirm
                   title={t('Confirm to delete this survey?')}
-                description={t('Survey name: {{name}} | data count: {{num}}', {
+                  description={t(
+                    'Survey name: {{name}} | data count: {{num}}',
+                    {
                       name: info?.name ?? '',
                       num: count ?? 0,
-                })}
+                    }
+                  )}
                   content={t('It will permanently delete the relevant data')}
                   onConfirm={handleDelete}
                 >
                   <Button variant="outline" size="icon" Icon={LuTrash} />
                 </AlertConfirm>
+              )}
             </div>
           }
         />

src/client/routes/telemetry.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { Trans, useTranslation } from '@i18next-toolkit/react';
@@ -35,6 +35,7 @@ function TelemetryComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = data.map((item) => ({
     id: item.id,
@@ -101,14 +102,20 @@ function TelemetryComponent() {
                 </div>
               }
               actions={
+                <>
+                  {hasAdminPermission && (
                     <Button
-                  className={cn(pathname === '/telemetry/add' && '!bg-muted')}
+                      className={cn(
+                        pathname === '/telemetry/add' && '!bg-muted'
+                      )}
                       variant="outline"
                       Icon={LuPlus}
                       onClick={handleClickAdd}
                     >
                       {t('Add')}
                     </Button>
+                  )}
+                </>
               }
             />
           }

src/client/routes/website.tsx

@@ -5,7 +5,7 @@ import { CommonWrapper } from '@/components/CommonWrapper';
 import { Button } from '@/components/ui/button';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -24,6 +24,7 @@ export const Route = createFileRoute('/website')({
 
 function WebsiteComponent() {
   const workspaceId = useCurrentWorkspaceId();
+  const hasAdminPermission = useHasAdminPermission();
   const { t } = useTranslation();
   const { data = [], isLoading } = trpc.website.all.useQuery({
     workspaceId,
@@ -83,6 +84,8 @@ function WebsiteComponent() {
                   >
                     {t('Overview')}
                   </Button>
+
+                  {hasAdminPermission && (
                     <Button
                       className={cn(pathname === '/website/add' && '!bg-muted')}
                       variant="outline"
@@ -90,6 +93,7 @@ function WebsiteComponent() {
                       Icon={LuPlus}
                       onClick={handleClickAdd}
                     />
+                  )}
                 </div>
               }
             />

src/client/routes/website/$websiteId/index.tsx

@@ -12,7 +12,11 @@ import { WebsiteMetricsTable } from '@/components/website/WebsiteMetricsTable';
 import { WebsiteOverview } from '@/components/website/WebsiteOverview';
 import { WebsiteVisitorMapBtn } from '@/components/website/WebsiteVisitorMapBtn';
 import { useGlobalRangeDate } from '@/hooks/useGlobalRangeDate';
-import { useCurrentWorkspaceId } from '@/store/user';
+import {
+  useCurrentWorkspaceId,
+  useHasAdminPermission,
+  useHasPermission,
+} from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -34,6 +38,7 @@ function WebsiteDetailComponent() {
   });
   const { startDate, endDate } = useGlobalRangeDate();
   const navigate = useNavigate();
+  const hasAdminPermission = useHasAdminPermission();
 
   if (!websiteId) {
     return <ErrorTip />;
@@ -57,6 +62,7 @@ function WebsiteDetailComponent() {
           title={website.name}
           actions={
             <div className="space-x-2">
+              {hasAdminPermission && (
                 <Button
                   size="icon"
                   variant="outline"
@@ -71,6 +77,7 @@ function WebsiteDetailComponent() {
                 >
                   <LuSettings />
                 </Button>
+              )}
 
               <WebsiteLighthouseBtn websiteId={website.id} />
 

src/client/store/user.ts

@@ -2,6 +2,7 @@ import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { createSocketIOClient } from '../api/socketio';
 import { AppRouterOutput } from '../api/trpc';
+import { ROLES } from '@tianji/shared';
 
 export type UserLoginInfo = NonNullable<AppRouterOutput['user']['info']>;
 
@@ -108,3 +109,36 @@ export function useCurrentWorkspaceId() {
 
   return currentWorkspaceId;
 }
+
+/**
+ * Direct return current workspace role
+ */
+export function useCurrentWorkspaceRole(): ROLES {
+  const workspace = useCurrentWorkspace();
+
+  return (workspace.role as ROLES) || ROLES.readOnly;
+}
+
+export function useHasPermission(role: ROLES): boolean {
+  const currentWorkspaceRole = useCurrentWorkspaceRole();
+
+  if (currentWorkspaceRole === ROLES.owner) {
+    return true;
+  }
+
+  if (currentWorkspaceRole === ROLES.admin && role !== ROLES.owner) {
+    return true;
+  }
+
+  if (currentWorkspaceRole === ROLES.readOnly && role === ROLES.readOnly) {
+    return true;
+  }
+
+  return false;
+}
+
+export function useHasAdminPermission(): boolean {
+  const hasAdminPermission = useHasPermission(ROLES.admin);
+
+  return hasAdminPermission;
+}

src/shared/src/role.ts

@@ -5,5 +5,6 @@ export enum SYSTEM_ROLES {
 
 export enum ROLES {
   owner = 'owner',
+  admin = 'admin',
   readOnly = 'readOnly',
 }