web: support custom config enable/allow module/feature in web frontend when vite build

Dockerfile

@@ -6,7 +6,7 @@ ARG EMBED_UI=yes
 ARG USE_DIST=no
 WORKDIR /web
 COPY web/ ./
-RUN [ $EMBED_UI != yes ] || [ $USE_API_HOST != yes ] || echo "VITE_HOST='$API_HOST'">.env
+RUN [ $EMBED_UI != yes ] || [ $USE_API_HOST != yes ] || echo "VITE_HOST='$API_HOST'">.env.local
 RUN [ $EMBED_UI != yes ] || [ $USE_DIST != no ] || (yarn && yarn build)
 RUN [ $EMBED_UI = yes ] || mkdir dist || echo ""
 

README.md

@@ -127,11 +127,11 @@ PaoPao主要由以下优秀的开源项目/工具构建
 
 #### 前端
 
-1. 进入前端目录 `web`，编辑 `.env` 文件中后端服务地址，下载依赖包
+1. 进入前端目录 `web`，拷贝`.env` 到 `.env.local`，编辑 `.env.local ` 文件中后端服务地址及其他配置项，下载依赖包
 
     ```sh
-    cd ./web
-    vim .env
+    cd ./web && cp .env .env.local
+    vim .env.local
     yarn
     ```
 
@@ -145,11 +145,11 @@ PaoPao主要由以下优秀的开源项目/工具构建
 
 #### 桌面端
 
-1. 进入前端目录 `web`，编辑 `.env` 文件中后端服务地址，下载依赖包
+1. 进入前端目录 `web`，拷贝`.env` 到 `.env.local`，编辑 `.env.local ` 文件中后端服务地址及其他配置项，下载依赖包
 
     ```sh
-    cd ./web
-    vim .env
+    cd ./web && cp .env .env.local
+    vim .env.local
     yarn
     ```
 

web/.env

@@ -1 +1,13 @@
 VITE_HOST="https://api.paopao.info"
+
+# 模块开启
+VITE_ENABLE_WALLET=true
+
+# 功能开启
+VITE_ALLOW_TWEET_ATTACHMENT=true
+VITE_ALLOW_TWEET_ATTACHMENT_PRICE=true
+VITE_ALLOW_TWEET_VIDEO=true
+VITE_ALLOW_TWEET_VISIBILITY=true
+
+# 局部参数
+VITE_DEFAULT_TWEET_VISIBILITY=public

web/src/components/compose.vue

@@ -73,7 +73,9 @@
                             </n-button>
                         </n-upload-trigger>
 
-                        <n-upload-trigger #="{ handleClick }" abstract>
+                        <n-upload-trigger
+                            v-if="allowTweetVideo"
+                            #="{ handleClick }" abstract>
                             <n-button
                                 :disabled="
                                     (fileQueue.length > 0 &&
@@ -101,7 +103,9 @@
                             </n-button>
                         </n-upload-trigger>
 
-                        <n-upload-trigger #="{ handleClick }" abstract>
+                        <n-upload-trigger
+                            v-if="allowTweetAttachment"
+                            #="{ handleClick }" abstract>
                             <n-button
                                 :disabled="
                                     (fileQueue.length > 0 &&
@@ -143,6 +147,7 @@
                         </n-button>
 
                          <n-button
+                            v-if="allowTweetVisibility"
                             quaternary
                             circle
                             type="primary"
@@ -190,6 +195,7 @@
                         v-if="attachmentContents.length > 0"
                     >
                         <n-input-number
+                            v-if="allowTweetAttachmentPrice"
                             v-model:value="attachmentPrice"
                             :min="0"
                             :max="100000"
@@ -299,12 +305,17 @@ const imageContents = ref<Item.CommentItemProps[]>([]);
 const videoContents = ref<Item.CommentItemProps[]>([]);
 const attachmentContents = ref<Item.AttachmentProps[]>([]);
 const visitType = ref<VisibilityEnum>(VisibilityEnum.PUBLIC);
+const defaultVisitType = ref<VisibilityEnum>(VisibilityEnum.FRIEND)
 const visibilities = [
     {value: VisibilityEnum.PUBLIC, label: "公开"}
     , {value: VisibilityEnum.PRIVATE, label: "私密"}
     , {value: VisibilityEnum.FRIEND, label: "好友可见"}
 ];
 
+const allowTweetVideo = (import.meta.env.VITE_ALLOW_TWEET_VIDEO.toLocaleLowerCase() === 'true')
+const allowTweetAttachment = (import.meta.env.VITE_ALLOW_TWEET_ATTACHMENT.toLocaleLowerCase() === 'true')
+const allowTweetAttachmentPrice = (import.meta.env.VITE_ALLOW_TWEET_ATTACHMENT_PRICE.toLocaleLowerCase() === 'true')
+const allowTweetVisibility = (import.meta.env.VITE_ALLOW_TWEET_VISIBILITY.toLocaleLowerCase() === 'true')
 const uploadGateway = import.meta.env.VITE_HOST + '/v1/attachment';
 const uploadToken = ref();
 
@@ -572,7 +583,7 @@ const submitPost = () => {
             imageContents.value = [];
             videoContents.value = [];
             attachmentContents.value = [];
-            visitType.value = VisibilityEnum.PUBLIC;
+            visitType.value = defaultVisitType.value;;
         })
         .catch((err) => {
             submitting.value = false;
@@ -583,6 +594,15 @@ const triggerAuth = (key: string) => {
     store.commit('triggerAuthKey', key);
 };
 onMounted(() => {
+    if (import.meta.env.VITE_DEFAULT_TWEET_VISIBILITY.toLowerCase() === 'friend') {
+        defaultVisitType.value = VisibilityEnum.FRIEND
+    } else if (import.meta.env.VITE_DEFAULT_TWEET_VISIBILITY.toLowerCase()  === 'public') {
+        defaultVisitType.value = VisibilityEnum.PUBLIC
+    } else {
+        defaultVisitType.value = VisibilityEnum.PRIVATE
+    }
+
+    visitType.value = defaultVisitType.value;
     uploadToken.value = 'Bearer ' + localStorage.getItem('PAOPAO_TOKEN');
 });
 </script>

web/src/components/sidebar.vue

@@ -151,8 +151,7 @@ onMounted(() => {
     };
 });
 const menuOptions = computed(() => {
-    return store.state.userInfo.id > 0
-        ? [
+    const options = [
         {
             label: '广场',
             key: 'home',
@@ -188,20 +187,24 @@ const menuOptions = computed(() => {
             key: 'star',
             icon: () => h(HeartOutline),
             href: '/star',
-              },
-              {
+        }
+    ];
+    if (import.meta.env.VITE_ENABLE_WALLET.toLocaleLowerCase() === 'true') {
+        options.push({
             label: '钱包',
             key: 'wallet',
             icon: () => h(WalletOutline),
             href: '/wallet',
-              },
-              {
+        });
+    }
+    options.push({
         label: '设置',
         key: 'setting',
         icon: () => h(SettingsOutline),
         href: '/setting',
-              },
-          ]
+    });
+    return store.state.userInfo.id > 0
+        ? options
         : [
               {
                   label: '广场',

web/src/vite-env.d.ts

@@ -2,3 +2,17 @@
 /// <reference types="vue/ref-macros" />
 /// <reference types="naive-ui/volar" />
 /// <reference types="@types/qrcode" />
+
+interface ImportMetaEnv {
+    readonly VITE_HOST: string
+    readonly VITE_ENABLE_WALLET: string
+    readonly VITE_ALLOW_TWEET_ATTACHMENT: string
+    readonly VITE_ALLOW_TWEET_ATTACHMENT_PRICE: string
+    readonly VITE_ALLOW_TWEET_VIDEO: string
+    readonly VITE_ALLOW_TWEET_VISIBILITY: string
+    readonly VITE_DEFAULT_TWEET_VISIBILITY: string
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}