From f645c3e1c0954ccff7e9117089be954a0367b890 Mon Sep 17 00:00:00 2001 From: rd <> Date: Wed, 25 Jun 2025 18:26:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=AA=92=E4=BD=93=E8=B4=A6?= =?UTF-8?q?=E5=8F=B7=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 6 + config/plugins/unocss.ts | 4 +- src/api/all/propertyMarketing.ts | 20 ++ src/api/index.ts | 33 ++-- src/assets/img/media-account/icon-add.png | Bin 0 -> 249 bytes src/assets/img/media-account/icon-delete.png | Bin 0 -> 354 bytes src/assets/img/media-account/icon-dy.png | Bin 0 -> 1842 bytes src/assets/img/media-account/icon-group.png | Bin 0 -> 513 bytes src/assets/img/media-account/icon-success.png | Bin 0 -> 760 bytes src/assets/img/media-account/icon-tag.png | Bin 0 -> 632 bytes src/assets/img/media-account/icon-warn.png | Bin 0 -> 791 bytes src/assets/img/media-account/icon-xhs.png | Bin 0 -> 1201 bytes src/layouts/Basic.vue | 2 +- src/main.ts | 8 +- src/router/constants.ts | 6 +- src/router/routes/modules/dataEngine.ts | 6 + .../routes/modules/propertyMarketing.ts | 4 +- src/styles/components/index.scss | 1 + src/styles/components/input.scss | 5 + src/styles/index.ts | 3 +- src/styles/vars.css | 4 + .../media-account/account-dashboard/index.vue | 12 ++ .../account-dashboard/style.scss | 0 .../components/account-table/index.vue | 80 ++++++++ .../components/account-table/style.scss | 103 ++++++++++ .../components/add-account-modal/index.vue | 31 +++ .../components/add-account-modal/style.scss | 18 ++ .../components/filter-block/index.vue | 160 ++++++++++++++++ .../components/filter-block/style.scss | 36 ++++ .../components/group-manage-modal/index.vue | 32 ++++ .../components/group-manage-modal/style.scss | 17 ++ .../components/tags-manage-modal/index.vue | 31 +++ .../components/tags-manage-modal/style.scss | 18 ++ .../media-account/account-manage/constants.ts | 38 ++++ .../media-account/account-manage/index.vue | 178 ++++++++++++++++++ .../media-account/account-manage/style.scss | 106 +++++++++++ .../components/account-table/index.vue | 80 ++++++++ .../components/account-table/style.scss | 103 ++++++++++ .../components/filter-block/index.vue | 94 +++++++++ .../components/filter-block/style.scss | 36 ++++ .../put-account/account-manage/constants.ts | 36 ++++ .../put-account/account-manage/index.vue | 143 ++++++++++++++ .../put-account/account-manage/style.scss | 106 +++++++++++ 43 files changed, 1537 insertions(+), 23 deletions(-) create mode 100644 src/api/all/propertyMarketing.ts create mode 100644 src/assets/img/media-account/icon-add.png create mode 100644 src/assets/img/media-account/icon-delete.png create mode 100644 src/assets/img/media-account/icon-dy.png create mode 100644 src/assets/img/media-account/icon-group.png create mode 100644 src/assets/img/media-account/icon-success.png create mode 100644 src/assets/img/media-account/icon-tag.png create mode 100644 src/assets/img/media-account/icon-warn.png create mode 100644 src/assets/img/media-account/icon-xhs.png create mode 100644 src/styles/components/index.scss create mode 100644 src/styles/components/input.scss create mode 100644 src/views/property-marketing/media-account/account-dashboard/index.vue create mode 100644 src/views/property-marketing/media-account/account-dashboard/style.scss create mode 100644 src/views/property-marketing/media-account/account-manage/components/account-table/index.vue create mode 100644 src/views/property-marketing/media-account/account-manage/components/account-table/style.scss create mode 100644 src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue create mode 100644 src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss create mode 100644 src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue create mode 100644 src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss create mode 100644 src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue create mode 100644 src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss create mode 100644 src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue create mode 100644 src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss create mode 100644 src/views/property-marketing/media-account/account-manage/constants.ts create mode 100644 src/views/property-marketing/media-account/account-manage/index.vue create mode 100644 src/views/property-marketing/media-account/account-manage/style.scss create mode 100644 src/views/property-marketing/put-account/account-manage/components/account-table/index.vue create mode 100644 src/views/property-marketing/put-account/account-manage/components/account-table/style.scss create mode 100644 src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue create mode 100644 src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss create mode 100644 src/views/property-marketing/put-account/account-manage/constants.ts create mode 100644 src/views/property-marketing/put-account/account-manage/index.vue create mode 100644 src/views/property-marketing/put-account/account-manage/style.scss diff --git a/.eslintrc.cjs b/.eslintrc.cjs index c09b865..a98f933 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,3 +1,7 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-24 16:29:10 + */ /* eslint-env node */ // eslint-disable-next-line @typescript-eslint/no-require-imports require('@rushstack/eslint-patch/modern-module-resolution'); @@ -29,6 +33,8 @@ module.exports = { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'prettier/prettier': ['error', { endOfLine: 'auto' }], + 'vue/no-duplicate-attributes': 'off', + 'vue/v-on-event-hyphenation': 'off', }, globals: { defineOptions: 'readonly', diff --git a/config/plugins/unocss.ts b/config/plugins/unocss.ts index 8327a11..c5b1970 100644 --- a/config/plugins/unocss.ts +++ b/config/plugins/unocss.ts @@ -1,8 +1,8 @@ /* * @Author: 田鑫 * @Date: 2023-03-05 18:14:16 - * @LastEditors: 田鑫 - * @LastEditTime: 2023-03-05 19:23:48 + * @LastEditors: Please set LastEditors + * @LastEditTime: 2025-06-25 10:54:24 * @Description: */ import Unocss from 'unocss/vite'; diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts new file mode 100644 index 0000000..0e68177 --- /dev/null +++ b/src/api/all/propertyMarketing.ts @@ -0,0 +1,20 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-25 17:34:56 + */ +import Http from '@/api'; + +// 媒体账号标签-列表 +export const fetchAccountTags = (params = {}) => { + return Http.get('/v1/media-account-tags/list', params); +}; + +// 媒体账号分组-列表 +export const fetchAccountGroups = (params = {}) => { + return Http.get('/v1/media-account-groups/list', params); +}; + +// 媒体运营人员分组-列表 +export const fetchAccountOperators = (params = {}) => { + return Http.get('/v1/media-account-operators/list', params); +}; diff --git a/src/api/index.ts b/src/api/index.ts index 88fd159..30efc74 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -8,21 +8,20 @@ import axios from 'axios'; import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; -import { handleUserLogout } from '@/utils/user'; +import { handleUserLogout, goUserLogin } from '@/utils/user'; +import { useEnterpriseStore } from '@/stores/modules/enterprise'; +import pinia from '@/stores'; const contentType = 'application/json'; const requestTimeout = 30000; -const HttpStatusCode = { - OK: 200, - BadRequest: 400, // 请求参数错误 - Unauthorized: 401, // token 无效或过期 - NotFound: 404, - InternalServerError: 500, -}; - -import { useEnterpriseStore } from '@/stores/modules/enterprise'; -import pinia from '@/stores'; +enum HttpStatusCode { + OK = 200, + BadRequest = 400, // 请求参数错误 + Unauthorized = 401, // token 无效或过期 + NotFound = 404, + InternalServerError = 500, +} //* 导出Request类，可以用来自定义传递配置来创建实例 export class Request { @@ -70,9 +69,15 @@ export class Request { } }, (err: any) => { - const message = err.response?.data?.message ?? err.message; - AMessage.error(message); - // 这里用来处理http常见错误，进行全局提示 + const { message, code } = err.response?.data ?? {}; + AMessage.error(message ?? err.message); + + switch (code) { + case HttpStatusCode.Unauthorized: + goUserLogin(); + break; + } + return Promise.reject(err.response); }, ); diff --git a/src/assets/img/media-account/icon-add.png b/src/assets/img/media-account/icon-add.png new file mode 100644 index 0000000000000000000000000000000000000000..d38660732d460afbcce7a5f0565affc2fd5ebdf6 GIT binary patch literal 249 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz&H|6fVg?2=RS;(M3{v?36l5$8 za(7}_cTVOdki(Mh=aoyIY88DX@@bXlwwI+jE>HX zo>f<(&RVM)uE_K&FI0hIN}!c-bjps!z?XL;P|_S%bdoKq6wGDek3|0#c#xau1c!Iw% zIz4)Wwv_et_4SmB?iP7k(UAi5@jM3`!z%9dW+_}P$aSl+GU&n{yMUwtbfL3E&VBAx zW7qZf_upco(yHPnc}hUHvVs#MiK@A?%t_wcgFkKhGaTtIf`dRvAHVEgW^9(+I*+kM znm@;u2BnJASUdCz*0}*JR*MtX$^@o~#Dzwx2xA$^7LPzvmYh?%7V(XjhwSe}r8I%6 zI}2`!rkdz1l}cu62(ZAiB!1P>GU7U4D@9Bm9L9qqN3i0f_b^!;qkYkoUQ%hP;Z8}a zPFGk?Bit|~6uCtKS<2&)?hJ;vY{6*q-x&92uz*8q3BwjBZDxmjrF<7vXA0HwBz%IE zu~TV_B?mm+rPVO!6qy&&bqD=NjGF2mMV{7uZVYfL!GTMf$0PqJF63u;VoFgOsPO4yY6br}j#~nK{ zbmPEDWa@w8@?Tz#ig6q;gQr@Z2#Q_ShjvOQax04 z$M?WL^&bw?7h)vE zPIci)IgLm6??A^sf%ce%Ts+fEx;ZUs-cjbcR?;PS|FClhjxO)TFd-rRDj_7vzf`)p zAb3+yEsB;lB2Li9d7HtuNM7c&rg8C26KoAjsv_===vviL2NwaQ?{&~ z_YhkW5;9VNnFJtpY~){h0efvqAt?<$VQC7x%41l6?;R*#bT0aydlsD|-{IP+X>8C{ zj%tGEDWpE$hj+XQ#Fy4oYSaU{vp%U*gY$JdD1tkC+jji;%;SW#WBjav7V!jztvC(@ zMO;8>xy*7A`kX3YJC0uR07}E(W7Fg(=n#oTNoHoG@!m2HOD8k`3j?`cUvq*pzk3kj z#!a|r;|3^#Sx=6N5b5zNG=@o}b=HtOtV}0H9(xt5-rkQ5vx7+6t&7xr6>QrYGzui+ z$u>gr3KnHnBGHBq-+TkXPt*A4mH*c<0^L@0&M?acOQhk294EHjhkC0vR36*ohZ33HFDPU#Uy04W~0Gg>IiGh z)`Fsf7SFm{O(N3;^( z14MRg|ChV-9dO~y5Ii#Oah!p-r{0^dgZ;TzXaYh?IZ}O?2`zoB83EwsY!eRj(NULQ znYaa?0@P>!e$FUwD>GfFE#ScC>>g49{E&k9S^g6^;zxi4-Fy`eLeL`|IdH-7HhV%z z!Z3K4E-5w7Qf%6b!IAvf1&9ytQ66QjSpchaE4P;^2vY{#*%k!gi5Stg?DoPt>cD|x z0picaiW1v`VJ}Z@b6+k=;DE0zs7&R1Ab;oWsGI9C<;>Z?KxF~JHFaj2;087Mn=w!< zFgoJ($maKPUoM)RB}EHN*FRZyEI=-iGEIdMIlSarOGENmP)b7SFWbL~C5d68F9t@% zkpls$puh{9nD&x}B$kH6E};5(h*a^(48`UYzFM-#v5@%_AcbpRe2AqbBbqoYuPPJjfZ^rsOn{0BY&_924}gG45s00000NkvXXu0mjf D4%*m2 literal 0 HcmV?d00001 diff --git a/src/assets/img/media-account/icon-success.png b/src/assets/img/media-account/icon-success.png new file mode 100644 index 0000000000000000000000000000000000000000..5a92a816ea11117b4a339067d99a3514b02e4774 GIT binary patch literal 760 zcmVo= z(?Ascf9!@Va|9zq6^Tu=p^CboIRWJaNl#E%A}DnUh-Hs}djjAD%?3qTH5;UgP~jtZ zSrU(j|6L5WGj{ArSixH)Gxm7io9{n=o&o-KAQ+%Me&+y$js)ePz(7P0+%)CX@3;Zf zL}dXFKEK_WZ>c^;aG;2|U^<_EMwYTpue#6uD)X)s;9R<`tsnLofEqw8pjSmmsetx) zxGxbtP_qR_KtDqD?0Wb3W8sLR8{3mNeWjEK8vr5>zV5y}*WS}zyf+yh2ov{C>o^u837cIeOQy663ylJylBWC-WH}D@Ud0^ z7n~LEKBz*T^c!>QNI#!)ZcBMiK=a1hfiiL_dc<;Ag?xK5JfUlD(PSZ=BT3s%8Vdm} z+WT5W2#42uapFwxk6&|Td2dS2KoCyS{v81kslswA6rLqvn{{7#NhD0jV*x4(mIPSZ zgh`-id&-N92q`)yI6Of^(<_1CxSY-XSfW zhKr_r3M;Cf8PLzKUMqkTghKlSHVn3AI)5m1gJb7XP7ZS>MmnlWd}=E~W@w_K|9BPHbBt$*4uyXu`SA7{LJ6+!UCBsM8oQ zlh~XXKV6`L0JfRmW0HZ9DV1C`VOr#=HFKsph_9GTTRN{8)NX>6eQ?JV=8trT!2p}g zmEuErs(F<%s`HA1I?SeHp(NB5iWH0Xikz3g!F;REduCQb5apky$@ArF2|38e+~(Tf za*PSTs;0fx_5$!Rzj%vdt?^qI_#j3^_p}2;`I~_7k(l4tVRb;) zb(^IaodAN?9F$A7x0#b?l7GA1%6qE56ynRB0HFm}wD?r2I%R_{z^4tkdKsDr*Tb0a z(nU{?h^LWCi^fy>%$&McST7mUjukdbEPq}C!y`j4*4+p z#*-C*!JDGLFZ1zK4VQBkGl07(vB@_#lv1Qz%x?k4Q@#f9wTh)G!R+icoL;pt=2k1) zaB!r*F!OQM&9&jf&p$Y$M>1anh=uSq-v|&25n{d-z!xIa{9XW8h#2#o0J|V!&7Aq;a*U3XU SB9Tb|0000C9tC>0NnuJ0B<0?#MYoO zF(`H{J0Yy-x3Z;?=9e@Yj{*L75O#q3LGMTG1&P)^GDg(EsO`lHrz(OisV!jM4}4hA zfPv4QQH^La0Hd09oz#CA~#)yah(cxQ-B~fcf)B#~PALWaz|X1gnm}Cv-<}@zk@O|(5kx-e+^E|^d%i(}jhFb*Jo>O- zqE3?!@;8O@R(eSn|G>GB26Mh~Z3kAX|KgYg7$GVPN>^Wo$9&kDDV4pi?Z9gFE<%d= zkda44=RA@=v2jhX06MeZ*94fme(V?GY!vX- zBph&`eGiBR*-IuObN**W8dMyEpJvq+UiQ#7xt$>a7slCee)D*LFw)27jVbSE*6=%3BAtbsGpalUBOn?yZOV~3FQ<~*hzfpi7l?yVT z!=6Cm^Lr(AA(aj4%+#1E-H8x(Bn?U_#je%3%!XVObg$Jk{k&EL<|ZWI?t3QUH`Iaa zb~Twl34Gnap&9TP%0JtoS@xA@s%g9G*^2<1U%zG$n9om-6X-R_IQAf{`!{rl%}=0idfoGzOroM8QQU(euzJlgLJ)*iye)cE@L*V2ogDU(J$P6a7IMil=S2?&PhpW9 z#5KDh0Rw_82>z@$*-cyoF)`CK)6>)4ueR!S&rDAyfgCb%4;J+Fn|k$LRekmI`XNN5 zH4D)Kx z^L}LIdLNYwsRlbdY}?W!JPMw1E%nU#_3lxT+`Jwm$%ZlDdk3#z9%@!YHS(2nz z3ALouUlq%ujz=k~PfwFj<=C+{-?phN=7k}J&!5vKkNw3((jPyP-q;{=U8;Xlg+zJ5)OQi&WM%YMFP{jQSGB3q9`Ljb81fakT*7#J{oVwu$C%f^G+ z>C<4bm-^kiXgSO1^>x4?FmI|>qvflspiZ8I+}*nXjRxo!FQPDZA;4a{*RC0_-Lq$@ zJ~d^=&d?C~_wSprcuYYMJxqFa)$r=YVl*G4Bs};0dBa=hvEJOI@W~U};IR|SbR!_K zJ#@&t^_w@XI3d6F)2GpVe?NFvuR^f6X#Q6P1wk!dr#Q}#%R%AoTgcqG1JdLM*<&me zK#h;Xfb1jtCJ<2VydzL2PDBPUgvroQ0%mW19_(}HK(DL-v7)X{YTJNEju@pfhsTct zmCKwgzA+-dv}DFz21u+$z)+>qu_p;4BFwQ&U%CX4&x4wnfb_+S(E*+$URzG5p?>9x zF{U~)0@VWtz~MC@)xo?Ddy}5(XU_nJhe5N2^x;E`A3S~>A;SqpJg$w78Z<(Y7uXXC zOB@nQ68G@o7HU+hMe|aIxaH7oC1EN>l|q4PXU>o}I~$diB;mjSIf$k#O%lfBFD+3$ zPTGj!M{mb5CFk9^(N5y|dD3fZk=TO=9c9=?Kw??1L%6&Q;iE?;A%lDOIMb?t44Ypn zL27amf`tYC!0Q9|!Uf1Zd zJ17WL5x?w!g)@~)E$R)Dwaqvu+AH#A#C5$L83nvvWHHWq(*fnb { - + diff --git a/src/main.ts b/src/main.ts index f17132d..6fbbb30 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,14 +1,18 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-24 16:29:10 + */ import App from './App.vue'; import router from './router'; import store from './stores'; import '@/api/index'; +import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式 import './styles'; import './core'; import 'uno.css'; import './mock'; -import '@/styles/vars.css'; // 优先加载 -import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式 +// import '@/styles/vars.css'; // 优先加载 const app = createApp(App); app.use(store); diff --git a/src/router/constants.ts b/src/router/constants.ts index cf67bb6..6fc8bef 100644 --- a/src/router/constants.ts +++ b/src/router/constants.ts @@ -1,3 +1,7 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-24 16:50:35 + */ export const WHITE_LIST = [ { name: 'notFound', children: [] }, { name: 'login', children: [] }, @@ -20,6 +24,6 @@ export const DEFAULT_ROUTE = { export const MENU_GROUP_IDS = { DATA_ENGINE_ID: 1, // 全域数据分析 MANAGEMENT_ID: -1, // 管理中心 - PROPERTY_ID: 2, // 资产营销平台 + PROPERTY_ID: 10, // 资产营销平台 WORK_BENCH_ID: -99, // 工作台 }; diff --git a/src/router/routes/modules/dataEngine.ts b/src/router/routes/modules/dataEngine.ts index 3c3859d..3c77f74 100644 --- a/src/router/routes/modules/dataEngine.ts +++ b/src/router/routes/modules/dataEngine.ts @@ -27,6 +27,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ locale: '行业热门话题洞察', requiresAuth: true, roles: ['*'], + id: 2, }, component: () => import('@/views/components/dataEngine/hotTranslation.vue'), }, @@ -37,6 +38,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ locale: '行业词云', requiresAuth: true, roles: ['*'], + id: 3, }, component: () => import('@/views/components/dataEngine/hotCloud.vue'), }, @@ -47,6 +49,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ locale: '行业关键词动向', requiresAuth: true, roles: ['*'], + id: 4, }, component: () => import('@/views/components/dataEngine/keyWord.vue'), }, @@ -57,6 +60,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ locale: '用户痛点观察', requiresAuth: true, roles: ['*'], + id: 5, }, component: () => import('@/views/components/dataEngine/userPainPoints.vue'), }, @@ -67,6 +71,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ locale: '重点品牌动向', requiresAuth: true, roles: ['*'], + id: 6, }, component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'), }, @@ -77,6 +82,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ locale: '用户画像', requiresAuth: true, roles: ['*'], + id: 7, }, component: () => import('@/views/components/dataEngine/userPersona.vue'), }, diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts index 5f9ba46..89610b6 100644 --- a/src/router/routes/modules/propertyMarketing.ts +++ b/src/router/routes/modules/propertyMarketing.ts @@ -53,7 +53,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ requiresAuth: true, roles: ['*'], }, - component: () => import('@/views/property-marketing/repository/test'), + component: () => import('@/views/property-marketing/media-account/account-manage'), }, { path: 'accountDashboard', @@ -98,7 +98,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ requiresAuth: true, roles: ['*'], }, - component: () => import('@/views/property-marketing/repository/test'), + component: () => import('@/views/property-marketing/put-account/account-manage'), }, { path: 'accountData', diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss new file mode 100644 index 0000000..85aca0b --- /dev/null +++ b/src/styles/components/index.scss @@ -0,0 +1 @@ +@import "./input.scss"; \ No newline at end of file diff --git a/src/styles/components/input.scss b/src/styles/components/input.scss new file mode 100644 index 0000000..a352fa3 --- /dev/null +++ b/src/styles/components/input.scss @@ -0,0 +1,5 @@ +.arco-input-wrapper { + border-radius: 4px; + border-color: #d7d7d9; + background-color: #fff; +} diff --git a/src/styles/index.ts b/src/styles/index.ts index 32f4eac..c40f6c5 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1,3 +1,4 @@ +import './vars.css'; +import './components/index.scss'; import 'normalize.css'; import 'uno.css'; -import './vars.css'; diff --git a/src/styles/vars.css b/src/styles/vars.css index c192269..7a00c4c 100644 --- a/src/styles/vars.css +++ b/src/styles/vars.css @@ -17,6 +17,10 @@ * { box-sizing: border-box; } +p { + margin: 0; + padding: 0; +} .flex { display: flex; diff --git a/src/views/property-marketing/media-account/account-dashboard/index.vue b/src/views/property-marketing/media-account/account-dashboard/index.vue new file mode 100644 index 0000000..d7d4473 --- /dev/null +++ b/src/views/property-marketing/media-account/account-dashboard/index.vue @@ -0,0 +1,12 @@ + + + + + + + diff --git a/src/views/property-marketing/media-account/account-dashboard/style.scss b/src/views/property-marketing/media-account/account-dashboard/style.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue new file mode 100644 index 0000000..7b89186 --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue @@ -0,0 +1,80 @@ + + + + + + diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss new file mode 100644 index 0000000..0a75fe9 --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss @@ -0,0 +1,103 @@ +.card-container { + flex: 1; + display: grid; + grid-template-rows: repeat(2, 1fr); /* 2行 */ + grid-template-columns: repeat(4, 1fr); /* 4列 */ + gap: 20px; + .card-item { + border-radius: 8px; + border: 1px solid var(--BG-300, #e6e6e8); + background: var(--BG-white, #fff); + padding: 12px 16px 16px; + display: flex; + align-items: flex-start; + .name { + color: var(--Text-1, #211f24); + font-family: 'Alibaba PuHuiTi'; + font-size: 14px; + font-style: normal; + font-weight: 400; + margin-bottom: 11px; + // line-height: 22px; /* 157.143% */ + } + .label { + color: var(--Text-3, #737478); + font-family: 'Alibaba PuHuiTi'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + .field-row { + width: 100%; + margin-bottom: 4px; + display: flex; + justify-content: space-between; + .cts { + color: var(--Text-2, #3c4043); + font-family: 'Alibaba PuHuiTi'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + .status-box { + display: flex; + padding: 0px 8px; + align-items: center; + border-radius: 2px; + background: #f2f3f5; + .text { + color: var(--BG-700, #737478); + font-family: 'Alibaba PuHuiTi'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + + &-1 { + background: #ebf7f2; + .text { + color: #25c883; + } + } + &-2 { + background: #ffe7e4; + .text { + color: #f64b31; + } + } + } + .tag-box { + display: flex; + height: 16px; + padding: 0px 4px; + align-items: center; + border-radius: 2px; + background: var(--BG-200, #f2f3f5); + .text { + color: var(--Text-2, #3c4043); + font-family: 'Alibaba PuHuiTi'; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + &:not(:last-child) { + margin-right: 4px; + } + } + &:last-child { + margin-bottom: 8px; + } + } + + .operate-row { + display: flex; + align-items: center; + justify-content: flex-end; + padding-top: 8px; + } + } +} diff --git a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue new file mode 100644 index 0000000..5dbfd99 --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue @@ -0,0 +1,31 @@ + + + + + + diff --git a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss new file mode 100644 index 0000000..06dee88 --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss @@ -0,0 +1,18 @@ +.add-account-modal { + .arco-modal-header { + border-bottom: none; + height: 56px; + padding: 22px 24px 16px 24px; + .arco-modal-title { + justify-content: flex-start; + } + } + .arco-modal-body { + padding: 16px 24px 20px; + } + .arco-modal-footer { + border-top: none; + padding: 0; + } + } + \ No newline at end of file diff --git a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue new file mode 100644 index 0000000..888191e --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue @@ -0,0 +1,160 @@ + + + + + + diff --git a/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss b/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss new file mode 100644 index 0000000..3a33894 --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss @@ -0,0 +1,36 @@ +.container { + :deep(.arco-input-wrapper), + :deep(.arco-select-view-single), + :deep(.arco-select-view-multiple) { + border-radius: 4px; + border-color: #d7d7d9; + background-color: #fff; + &:focus-within, + &.arco-input-focus { + background-color: var(--color-bg-2); + border-color: rgb(var(--primary-6)); + box-shadow: 0 0 0 0 var(--color-primary-light-2); + } + } + .filter-row { + .filter-row-item { + &:not(:last-child) { + margin-right: 24px; + } + .label { + margin-right: 8px; + color: #211f24; + font-family: 'Alibaba PuHuiTi'; + font-size: 14px; + font-style: normal; + font-weight: 400; + flex-shrink: 0; + line-height: 22px; /* 157.143% */ + } + :deep(.arco-space-item) { + width: 100%; + } + } + } + +} diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue new file mode 100644 index 0000000..605f2ca --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue @@ -0,0 +1,32 @@ + + + + + + diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss new file mode 100644 index 0000000..131322b --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss @@ -0,0 +1,17 @@ +.account-manage-modal { + .arco-modal-header { + border-bottom: none; + height: 56px; + padding: 22px 24px 16px 24px; + .arco-modal-title { + justify-content: flex-start; + } + } + .arco-modal-body { + padding: 16px 24px 20px; + } + .arco-modal-footer { + border-top: none; + padding: 0; + } +} diff --git a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue new file mode 100644 index 0000000..471dfb2 --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue @@ -0,0 +1,31 @@ + + + + + + diff --git a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss new file mode 100644 index 0000000..6c21865 --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss @@ -0,0 +1,18 @@ +.tags-manage-modal { + .arco-modal-header { + border-bottom: none; + height: 56px; + padding: 22px 24px 16px 24px; + .arco-modal-title { + justify-content: flex-start; + } + } + .arco-modal-body { + padding: 16px 24px 20px; + } + .arco-modal-footer { + border-top: none; + padding: 0; + } + } + \ No newline at end of file diff --git a/src/views/property-marketing/media-account/account-manage/constants.ts b/src/views/property-marketing/media-account/account-manage/constants.ts new file mode 100644 index 0000000..39ae6fd --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/constants.ts @@ -0,0 +1,38 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-25 15:24:59 + */ +export const INITIAL_QUERY = { + search: '', + status: '', + platform: '', + operator_id: '', + group_ids: [], + tag_ids: [], +}; + +export const PLATFORM_LIST = [ + { + label: '抖音', + value: 0, + }, + { + label: '小红书', + value: 1, + }, +]; + +export const STATUS_LIST = [ + { + label: '未授权', + value: 0, + }, + { + label: '正常', + value: 1, + }, + { + label: '异常', + value: 2, + }, +]; diff --git a/src/views/property-marketing/media-account/account-manage/index.vue b/src/views/property-marketing/media-account/account-manage/index.vue new file mode 100644 index 0000000..6c59e6b --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/index.vue @@ -0,0 +1,178 @@ + + + + + + diff --git a/src/views/property-marketing/media-account/account-manage/style.scss b/src/views/property-marketing/media-account/account-manage/style.scss new file mode 100644 index 0000000..97d0462 --- /dev/null +++ b/src/views/property-marketing/media-account/account-manage/style.scss @@ -0,0 +1,106 @@ +.account-manage-wrap { + height: 100%; + display: flex; + flex-direction: column; + :deep(.search-btn) { + border-radius: 4px; + border: 1px solid var(--Brand-Brand-6, #6d4cfe); + color: #6d4cfe; + } + :deep(.reset-btn) { + border-radius: 4px; + border: 1px solid var(--BG-500, #b1b2b5); + background: var(--BG-white, #fff); + } + .filter-wrap { + border-radius: 8px; + border: 1px solid #e6e6e8; + .top { + .title { + font-family: 'Alibaba PuHuiTi'; + font-style: normal; + } + :deep(.arco-btn) { + .arco-btn-icon { + line-height: 16px; + } + } + } + } + .tip-row { + border-radius: 2px; + background: #f0edff; + .label { + font-family: 'Alibaba PuHuiTi'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + } + &.normal { + background: #ebf7f2; + .label { + color: #211f24; + } + } + &.abnormal { + background: #ffe7e4; + .label { + color: #211f24; + } + } + .err-btn { + background-color: #f64b31 !important; + color: var(--BG-white, #fff); + font-family: 'PingFang SC'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + } + .card-wrap { + display: flex; + flex-direction: column; + .pagination-box { + display: flex; + width: 100%; + padding: 16px 24px; + justify-content: flex-end; + align-items: center; + :deep(.arco-pagination) { + .arco-pagination-list { + .arco-pagination-item { + border-radius: 4px; + border: 1px solid var(--BG-300, #e6e6e8); + &.arco-pagination-item-ellipsis { + border: none; + } + + &.arco-pagination-item-active { + background-color: transparent; + border: 1px solid var(--Brand-Brand-6, #6d4cfe); + } + } + } + .arco-pagination-jumper-input { + border-radius: 4px; + border: 1px solid var(--BG-300, #e6e6e8); + } + .arco-pagination-jumper-prepend { + color: var(--Text-2, #3c4043); + text-align: right; + font-family: 'Alibaba PuHuiTi'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; /* 157.143% */ + } + .arco-select-view-single { + border-radius: 4px; + border: 1px solid var(--BG-300, #e6e6e8); + } + } + } + } +} diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue new file mode 100644 index 0000000..8828433 --- /dev/null +++ b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue @@ -0,0 +1,80 @@ + + + + + + diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss new file mode 100644 index 0000000..0a75fe9 --- /dev/null +++ b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss @@ -0,0 +1,103 @@ +.card-container { + flex: 1; + display: grid; + grid-template-rows: repeat(2, 1fr); /* 2行 */ + grid-template-columns: repeat(4, 1fr); /* 4列 */ + gap: 20px; + .card-item { + border-radius: 8px; + border: 1px solid var(--BG-300, #e6e6e8); + background: var(--BG-white, #fff); + padding: 12px 16px 16px; + display: flex; + align-items: flex-start; + .name { + color: var(--Text-1, #211f24); + font-family: 'Alibaba PuHuiTi'; + font-size: 14px; + font-style: normal; + font-weight: 400; + margin-bottom: 11px; + // line-height: 22px; /* 157.143% */ + } + .label { + color: var(--Text-3, #737478); + font-family: 'Alibaba PuHuiTi'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + .field-row { + width: 100%; + margin-bottom: 4px; + display: flex; + justify-content: space-between; + .cts { + color: var(--Text-2, #3c4043); + font-family: 'Alibaba PuHuiTi'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + .status-box { + display: flex; + padding: 0px 8px; + align-items: center; + border-radius: 2px; + background: #f2f3f5; + .text { + color: var(--BG-700, #737478); + font-family: 'Alibaba PuHuiTi'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + + &-1 { + background: #ebf7f2; + .text { + color: #25c883; + } + } + &-2 { + background: #ffe7e4; + .text { + color: #f64b31; + } + } + } + .tag-box { + display: flex; + height: 16px; + padding: 0px 4px; + align-items: center; + border-radius: 2px; + background: var(--BG-200, #f2f3f5); + .text { + color: var(--Text-2, #3c4043); + font-family: 'Alibaba PuHuiTi'; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + &:not(:last-child) { + margin-right: 4px; + } + } + &:last-child { + margin-bottom: 8px; + } + } + + .operate-row { + display: flex; + align-items: center; + justify-content: flex-end; + padding-top: 8px; + } + } +} diff --git a/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue new file mode 100644 index 0000000..39dc8f2 --- /dev/null +++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue @@ -0,0 +1,94 @@ + + + + + + diff --git a/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss b/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss new file mode 100644 index 0000000..3a33894 --- /dev/null +++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss @@ -0,0 +1,36 @@ +.container { + :deep(.arco-input-wrapper), + :deep(.arco-select-view-single), + :deep(.arco-select-view-multiple) { + border-radius: 4px; + border-color: #d7d7d9; + background-color: #fff; + &:focus-within, + &.arco-input-focus { + background-color: var(--color-bg-2); + border-color: rgb(var(--primary-6)); + box-shadow: 0 0 0 0 var(--color-primary-light-2); + } + } + .filter-row { + .filter-row-item { + &:not(:last-child) { + margin-right: 24px; + } + .label { + margin-right: 8px; + color: #211f24; + font-family: 'Alibaba PuHuiTi'; + font-size: 14px; + font-style: normal; + font-weight: 400; + flex-shrink: 0; + line-height: 22px; /* 157.143% */ + } + :deep(.arco-space-item) { + width: 100%; + } + } + } + +} diff --git a/src/views/property-marketing/put-account/account-manage/constants.ts b/src/views/property-marketing/put-account/account-manage/constants.ts new file mode 100644 index 0000000..18c8201 --- /dev/null +++ b/src/views/property-marketing/put-account/account-manage/constants.ts @@ -0,0 +1,36 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-25 15:24:59 + */ +export const INITIAL_QUERY = { + search: '', + status: '', + platform: '', + operator_id: '', +}; + +export const PLATFORM_LIST = [ + { + label: '抖音', + value: 0, + }, + { + label: '小红书', + value: 1, + }, +]; + +export const STATUS_LIST = [ + { + label: '未授权', + value: 0, + }, + { + label: '正常', + value: 1, + }, + { + label: '异常', + value: 2, + }, +]; diff --git a/src/views/property-marketing/put-account/account-manage/index.vue b/src/views/property-marketing/put-account/account-manage/index.vue new file mode 100644 index 0000000..44f7ff1 --- /dev/null +++ b/src/views/property-marketing/put-account/account-manage/index.vue @@ -0,0 +1,143 @@ + + + + + + diff --git a/src/views/property-marketing/put-account/account-manage/style.scss b/src/views/property-marketing/put-account/account-manage/style.scss new file mode 100644 index 0000000..97d0462 --- /dev/null +++ b/src/views/property-marketing/put-account/account-manage/style.scss @@ -0,0 +1,106 @@ +.account-manage-wrap { + height: 100%; + display: flex; + flex-direction: column; + :deep(.search-btn) { + border-radius: 4px; + border: 1px solid var(--Brand-Brand-6, #6d4cfe); + color: #6d4cfe; + } + :deep(.reset-btn) { + border-radius: 4px; + border: 1px solid var(--BG-500, #b1b2b5); + background: var(--BG-white, #fff); + } + .filter-wrap { + border-radius: 8px; + border: 1px solid #e6e6e8; + .top { + .title { + font-family: 'Alibaba PuHuiTi'; + font-style: normal; + } + :deep(.arco-btn) { + .arco-btn-icon { + line-height: 16px; + } + } + } + } + .tip-row { + border-radius: 2px; + background: #f0edff; + .label { + font-family: 'Alibaba PuHuiTi'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + } + &.normal { + background: #ebf7f2; + .label { + color: #211f24; + } + } + &.abnormal { + background: #ffe7e4; + .label { + color: #211f24; + } + } + .err-btn { + background-color: #f64b31 !important; + color: var(--BG-white, #fff); + font-family: 'PingFang SC'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + } + .card-wrap { + display: flex; + flex-direction: column; + .pagination-box { + display: flex; + width: 100%; + padding: 16px 24px; + justify-content: flex-end; + align-items: center; + :deep(.arco-pagination) { + .arco-pagination-list { + .arco-pagination-item { + border-radius: 4px; + border: 1px solid var(--BG-300, #e6e6e8); + &.arco-pagination-item-ellipsis { + border: none; + } + + &.arco-pagination-item-active { + background-color: transparent; + border: 1px solid var(--Brand-Brand-6, #6d4cfe); + } + } + } + .arco-pagination-jumper-input { + border-radius: 4px; + border: 1px solid var(--BG-300, #e6e6e8); + } + .arco-pagination-jumper-prepend { + color: var(--Text-2, #3c4043); + text-align: right; + font-family: 'Alibaba PuHuiTi'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; /* 157.143% */ + } + .arco-select-view-single { + border-radius: 4px; + border: 1px solid var(--BG-300, #e6e6e8); + } + } + } + } +}