NewIndex.ets 58 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748
  1. import { AppUtil, ArrayUtil, DeviceUtil, DisplayUtil, LogUtil, PreferencesUtil, ToastUtil } from '@pura/harmony-utils';
  2. import TitleBar from '../view/TitleBar';
  3. import { curves,
  4. ImmersiveMode,
  5. LengthMetrics,
  6. LevelMode,
  7. MenuModifier,
  8. router, SegmentButton, SegmentButtonOptions, SymbolGlyphModifier } from '@kit.ArkUI';
  9. import mainViewModel, { MainViewModel } from '../viewmodel/MainViewModel';
  10. import ItemData from '../viewmodel/ItemData';
  11. import type { sysResource } from '../viewmodel/ItemData';
  12. import { CommonConstants } from '../common/constants/CommonConstants';
  13. import { EventConstants } from '../common/constants/EventConstants';
  14. import { VideoItem } from '../viewmodel/VideoItem';
  15. import ScreenUtil from '../common/util/ScreenUtil';
  16. import { Utility } from '../common/util/Utility';
  17. import { BusinessError, emitter } from '@kit.BasicServicesKit';
  18. import { common } from '@kit.AbilityKit';
  19. import { BreakpointSystem, BreakpointTypeEnum } from '../common/util/BreakpointSystem';
  20. import dataStorage from '@ohos.data.storage';
  21. import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
  22. import { SettingPage } from './SettingPage';
  23. import { deviceInfo } from '@kit.BasicServicesKit';
  24. import { resourceManager } from '@kit.LocalizationKit';
  25. import { systemShare } from '@kit.ShareKit';
  26. import { uniformTypeDescriptor } from '@kit.ArkData';
  27. import { hilog } from '@kit.PerformanceAnalysisKit';
  28. import { DialogHelper, DialogAction } from '@pura/harmony-dialog';
  29. import UserUtil from '../common/util/UserUtil';
  30. import json from '@ohos.util.json';
  31. import { UserCenter } from './UserCenter';
  32. import { ScanFilePage } from './ScanFilePage';
  33. import { AboutPage, gotoShare } from './AboutPage';
  34. import { smartMobilityCommon } from '@kit.CarKit';
  35. import { UpdateLogManager } from '../common/util/UpdateLogManager';
  36. import OnlineUpdateLogDialog from '../dialog/OnlineUpdateLog';
  37. import OnlineUpdateLog from '../dialog/OnlineUpdateLog';
  38. import { LocalMusic } from '../view/LocalMusic';
  39. import { ChartsCount } from './ChartsCount';
  40. import { image } from '@kit.ImageKit';
  41. import { Playlist, PlaylistSong } from '../viewmodel/Playlist';
  42. import PlaylistTable from '../common/util/PlaylistTable';
  43. import { convertPlaylistSongsToVideoItems } from './PlaylistDetailPage';
  44. import MediaTable from '../common/util/MediaTable';
  45. import { showCreatePlaylistDialog } from '../dialog/PlaylistDialog';
  46. import { ImagePickerUtil } from '../common/util/ImagePickerUtil';
  47. import { WebDavMainPage } from './WebDavMainPage';
  48. import { WebDavAccount } from '../viewmodel/WebDavAccount';
  49. import { RemoteDriveManager } from '../common/util/RemoteDriveManager';
  50. import { RemoteDriveAccountDialog } from '../dialog/RemoteDriveAccountDialog';
  51. import ReqPermissionUtil from '../common/util/ReqPermissionUtil';
  52. import { getRemoteDriveAccountLabel, getRemoteDriveDisplayLabel, getRemoteDriveProtocolLabel } from '../common/util/RemoteDriveLabel';
  53. import { RemoteDriveType } from '../common/enums/RemoteDriveType';
  54. // import { FFmpeg, FFProgressMessageParser } from '@sj/ffmpeg';
  55. const TAG = 'NewIndex'; // 日志标签
  56. /**
  57. * 首页主组件,包含顶部标题栏、主内容区(本地音乐/网络内容)、侧边抽屉菜单等。
  58. * 支持多端适配、广告集成、导航、生命周期管理等功能。
  59. */
  60. @Preview
  61. @Entry
  62. @Component
  63. struct NewIndex {
  64. /** 页面上下文 */
  65. context = this.getUIContext().getHostContext() as common.UIAbilityContext
  66. @Provide currentSongListName:string = '' //当前歌单名称
  67. @Provide currentSongListID:string='' //当前歌单ID
  68. @State isDarkMode: boolean = false
  69. /** 列表滚动器,用于抽屉菜单列表滚动 */
  70. private scroller: Scroller = new Scroller();
  71. /** 应用包名 */
  72. @State bundleName: string = ''
  73. @State appName: string = ''
  74. /** 是否显示侧边抽屉菜单 */
  75. @Provide isShowDrawer: boolean = false;
  76. /** 抽屉菜单 X 轴偏移量,用于手势滑动动画 */
  77. @Provide offsetX: number = 0;
  78. /** 本地视频列表,页面参数传入 */
  79. @Provide videoLocalList: Array<VideoItem> = []
  80. /** Y 轴偏移量(预留) */
  81. @State offsetY: number = 0;
  82. /** 主内容类型(0:本地音乐,1:网络内容) */
  83. @Provide mType: number = 0
  84. /** 模式类型(如文件夹 媒体库 艺术家、专辑等) */
  85. @Provide modeType: number = 0
  86. /** 是否为零状态(预留) */
  87. @Provide('isZero') isZero: boolean = false;
  88. /** 是否显示赞助入口 */
  89. @State isShowSponsorship: boolean = false
  90. /** 音乐是否为零状态(预留) */
  91. @Provide('isMusicZero') isMusicZero: boolean = false;
  92. @State isShowTitleBar: boolean = false //是否显示分类导航条
  93. /** 本地音乐列表,持久化存储 */
  94. @StorageLink('musicLocalList') musicLocalList: Array<VideoItem> = []
  95. @Provide isFavMusic: boolean = false
  96. @StorageProp('windowWidth') windowWidth: number = 0;
  97. @StorageProp('windowHeight') windowHeight: number = 0;
  98. @StorageProp('isHiCarStatus') isHiCarStatus: boolean = false;
  99. @StorageProp('curDisplayIsHiCar') curDisplayIsHiCar: boolean = false;
  100. @State idDefaultMediaKu: boolean = false
  101. /**
  102. * 是否显示更新日志开关
  103. */
  104. @State isShowUpdateDialog: boolean = false
  105. /** 标题栏配置模型 */
  106. @State titleBarModel: TitleBar.Model = new TitleBar.Model()
  107. .setTitleTextStyle(FontStyle.Normal)
  108. .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
  109. .setLeftIcon($r('app.media.menu'))
  110. .setLeftIconWidth(28)
  111. .setLeftIconHeight(28)
  112. .setTitleBarMinHeight(64)
  113. .setTitleName('首页')// .setRightIcon($r('app.media.add'))
  114. .setTitleFontSize(19)
  115. .setTitleFontColor(Color.White)
  116. .setTitleBarBackground($r('app.color.title_bar_bg'))
  117. .setLeftTitleBackground($r('app.color.title_bar_bg'))
  118. .setOnLeftClickListener(() => {
  119. // 打开菜单栏动画
  120. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  121. this.isShowDrawer = true
  122. this.offsetX = 0
  123. })
  124. })
  125. .setRightTitleBackground($r('app.color.title_bar_bg'))
  126. // .setOnRightClickListener(()=>{
  127. // // this.goSelectVideo()
  128. // this.showSheelDialog()
  129. // })
  130. /** 应用版本号 */
  131. @State versionName: string = ''
  132. /** 音频根目录路径 */
  133. @Provide rootPath: string = ''
  134. /** 当前路径 */
  135. @Provide currentPath: string = ''
  136. /** 是否为历史记录页面 */
  137. @Provide isHistory: boolean = false
  138. /** 是否可以返回上一级 */
  139. @Provide isCanBack: boolean = false
  140. @StorageProp('currentColorMode') currentMode: number = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
  141. @StorageProp('themeColor') themeColor: string = CommonConstants.DEFAULT_THEME_COLOR;
  142. /**
  143. * 一多界面适配断点系统
  144. */
  145. private breakpointSystem: BreakpointSystem = new BreakpointSystem();
  146. /** 当前断点类型(如大屏/小屏) */
  147. @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
  148. /** 记录上一次点击返回键的时间戳,用于双击退出 */
  149. private backTime: number = 0;
  150. @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
  151. buttons: [{ text: '分类' }, { text: '歌单' }, { text: '网盘' }],
  152. direction: Direction.Ltr,
  153. backgroundColor: $r('app.color.index_background'),
  154. selectedBackgroundColor:$r('app.color.start_window_background'),
  155. selectedFontColor: $r('app.color.text_color'),
  156. localizedTextPadding: {
  157. end: LengthMetrics.vp(10),
  158. start: LengthMetrics.vp(10)
  159. }
  160. })
  161. @State @Watch('tabSelectedIndexesChanged') tabSelectedIndexes: number[] = [0]
  162. //当胶囊按钮的选择发生变化时调用此函数
  163. tabSelectedIndexesChanged() {
  164. if(this.tabSelectedIndexes[0]==1){
  165. this.mType = 0
  166. } else if(this.tabSelectedIndexes[0]==2){
  167. // 网盘选项卡
  168. this.mType = 6
  169. }
  170. }
  171. // 歌单相关状态变量
  172. @State playlistList: Playlist[] = []
  173. @State isShowCreatePlaylistDialog: boolean = false
  174. @State selectedPlaylist: Playlist | null = null
  175. private playlistTable: PlaylistTable | null = null
  176. // 网盘账户相关状态变量
  177. @State webDavAccounts: WebDavAccount[] = []
  178. private webdavManager: RemoteDriveManager = RemoteDriveManager.getInstance()
  179. private _webDavLoading: boolean = false // 防止重复加载网盘账户的标志
  180. @State selectedAccount: WebDavAccount = new WebDavAccount()
  181. /**
  182. * 返回键处理逻辑:
  183. * - 如果不是根目录或有历史记录,发送广播通知更新列表
  184. * - 如果是根目录,双击返回键退出应用,否则提示
  185. */
  186. onBackPress(): boolean | void {
  187. if (this.currentPath !== this.rootPath || this.isHistory || this.isFavMusic ||
  188. (this.modeType !== 0 && this.isCanBack)) {
  189. console.info('onecold 返回键处理逻辑:发送音频广播通知更新列表');
  190. const eventData: emitter.EventData = {};
  191. emitter.emit({ eventId: EventConstants.EVENT_SWIPE_BACK_UPDATE }, eventData); // 发送音频广播通知更新doSwipBack
  192. }else if(this.mType > 0){
  193. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  194. // 动画闭包内控制Image组件的出现和消失
  195. // this.isShowDrawer = !this.isShowDrawer
  196. // this.offsetX = 0
  197. this.mType =0
  198. })
  199. } else {
  200. console.info('onecold 返回键处理 关闭');
  201. if (this.isShowDrawer) {
  202. // 如果抽屉菜单打开,先关闭抽屉
  203. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  204. this.isShowDrawer = false
  205. })
  206. } else {
  207. return false
  208. }
  209. }
  210. return true;
  211. }
  212. /**
  213. * 刷新@State用户信息变量,确保UI同步
  214. */
  215. refreshUserInfoState() {
  216. this.isLogin = PreferencesUtil.getBooleanSync('isLogin', false);
  217. this.userId = PreferencesUtil.getNumberSync('userId', 0);
  218. this.userName = PreferencesUtil.getStringSync('userName', '未登录用户');
  219. this.userAvatarUrl = PreferencesUtil.getStringSync('userAvatarUrl', '');
  220. this.subscriptionName = PreferencesUtil.getStringSync('subscriptionName', '');
  221. this.subscriptionEndDate = PreferencesUtil.getStringSync('subscriptionEndDate', '');
  222. this.hasActiveSubscription = PreferencesUtil.getBooleanSync('hasActiveSubscription', false);
  223. }
  224. onPageShow() {
  225. LogUtil.info('heanup NewIndex', 'onPageShow 被调用,刷新歌单列表和网盘账户列表')
  226. // 加载歌单列表
  227. this.loadPlaylistList()
  228. // 加载网盘账户列表
  229. this.loadWebDavAccounts()
  230. }
  231. /**
  232. * 页面显示生命周期钩子
  233. * - 注册断点系统
  234. * - 获取页面参数
  235. * - 设置状态栏样式
  236. * - 初始化图片缓存
  237. * - 判断是否显示赞助入口
  238. */
  239. async aboutToAppear() {
  240. ReqPermissionUtil.reqPermissionsFromUser(ReqPermissionUtil.permissions, this.context);
  241. this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, false)
  242. this.idDefaultMediaKu = PreferencesUtil.getBooleanSync('idDefaultMediaKu', false)
  243. if(this.idDefaultMediaKu){
  244. this.modeType = 1
  245. }
  246. Utility.enableFullScreen()
  247. this.topRectHeight = px2vp(AppUtil.getStatusBarHeight());
  248. Utility.getAppName(getContext(this)).then((appName: string) => {
  249. this.appName = appName
  250. })
  251. this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
  252. this.breakpointSystem.register();
  253. let params = router.getParams() as Record<string, Object>;
  254. if (params && params.videoList) {
  255. this.videoLocalList = params.videoList as VideoItem[];
  256. LogUtil.info('heanup NewIndex', '从路由参数获取到播放列表,长度:' + this.videoLocalList.length)
  257. } else {
  258. this.videoLocalList = []
  259. LogUtil.info('heanup NewIndex', '路由参数中没有播放列表,使用空数组')
  260. }
  261. // 检查是否从WebDavPage返回
  262. if (params && params.fromWebDavPage) {
  263. LogUtil.info('heanup NewIndex', '从WebDavPage返回,切换到网盘标签页')
  264. this.mType = 6
  265. this.tabSelectedIndexes = [2] // 切换到网盘标签
  266. }
  267. // Utility.setStatusBarLight()
  268. ScreenUtil.setScreenSize();
  269. this.bundleName = AppUtil.getBundleName()
  270. this.versionName = AppUtil.getVersionName();
  271. // await ImageKnife.getInstance().initFileCache(this.context, 256, 256 * 1024 * 1024)
  272. this.isShowSponsorship = Utility.isOpenTime()
  273. let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', CommonConstants.DEFAULT_THEME_COLOR);
  274. hilog.info(0x0000, 'Heanup', '当前 NewIndex themeColor:' + themeColor);
  275. AppStorage.setOrCreate('themeColor', themeColor);
  276. this.themeColor = themeColor
  277. // ====== 本地会员同步提醒逻辑 ======
  278. // this.refreshUserInfoState();
  279. // if (this.isLogin) {
  280. // void this.fetchUserInfo();
  281. // }
  282. await UserUtil.fetchUserInfo();
  283. this.refreshUserInfoState();
  284. let changeUserState: emitter.InnerEvent = { eventId: EventConstants.EVENT_USER_STATE_CHANGE }
  285. emitter.on(changeUserState, () => {
  286. this.refreshUserInfoState();
  287. });
  288. let eventSetting: emitter.InnerEvent = { eventId: EventConstants.EVENT_SETTING_UPDATE }
  289. // 监听广播事件(通用设置配置更新)
  290. emitter.on(eventSetting, (eventData: emitter.EventData) => {
  291. this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
  292. });
  293. console.log('getHiCarStatus isHiCarStatus:' + this.isHiCarStatus)
  294. if(this.isHiCarStatus||this.isBigScreen()){
  295. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  296. this.isShowDrawer = true
  297. this.offsetX = 0
  298. })
  299. this.isShowTitleBar = false
  300. }
  301. // 检查并显示更新日志
  302. this.checkAndShowUpdateLog();
  303. // 初始化歌单数据库
  304. await this.initPlaylistTable();
  305. // 初始化WebDAV管理器
  306. await this.initWebDavManager();
  307. // 监听歌单刷新事件
  308. emitter.on({ eventId: EventConstants.EVENT_PLAYLIST_REFRESH }, (eventData: emitter.EventData) => {
  309. LogUtil.info('heanup NewIndex', '收到歌单刷新事件,开始刷新歌单列表')
  310. this.loadPlaylistList()
  311. });
  312. }
  313. /**
  314. * 检查并显示更新日志
  315. */
  316. private async checkAndShowUpdateLog() {
  317. try {
  318. const shouldShow = await UpdateLogManager.checkAndShowUpdateLog();
  319. if (shouldShow) {
  320. this.isShowUpdateDialog = !this.isShowUpdateDialog
  321. UpdateLogManager.markCurrentVersionShown()
  322. }
  323. // this.isShowUpdateDialog = true;//调试期间显示更新日志,测试完成后请删除
  324. } catch (error) {
  325. console.error('NewIndex checkAndShowUpdateLog error:', error);
  326. }
  327. }
  328. /**
  329. * 页面消失生命周期钩子
  330. * 注销断点系统
  331. */
  332. aboutToDisappear() {
  333. console.info('NewIndex aboutToDisappear');
  334. this.breakpointSystem.unregister();
  335. emitter.off(EventConstants.EVENT_SWIPE_BACK_UPDATE);
  336. emitter.off(EventConstants.EVENT_USER_STATE_CHANGE);
  337. // 监听歌单刷新事件
  338. emitter.off(EventConstants.EVENT_PLAYLIST_REFRESH);
  339. // 清理WebDAV管理器订阅
  340. if (this.webdavManager) {
  341. this.webdavManager.observers = [];
  342. }
  343. }
  344. build() {
  345. SideBarContainer(SideBarContainerType.AUTO) {
  346. Column() {
  347. this.getLeftView()
  348. }
  349. .backgroundColor(Color.Transparent)
  350. Column() {
  351. Stack() {
  352. // 本地音乐内容区
  353. LocalMusic()
  354. .visibility(this.mType === 0 ? Visibility.Visible : Visibility.None)
  355. // 网络内容区
  356. UserCenter()
  357. .visibility(this.mType === 1 ? Visibility.Visible : Visibility.None)
  358. ScanFilePage()
  359. .visibility(this.mType === 2 ? Visibility.Visible : Visibility.None)
  360. ChartsCount({
  361. isShowDrawer:this.isShowDrawer,
  362. offsetX:this.offsetX
  363. })
  364. .visibility(this.mType === 3 ? Visibility.Visible : Visibility.None)
  365. SettingPage()
  366. .visibility(this.mType === 4 ? Visibility.Visible : Visibility.None)
  367. AboutPage()
  368. .visibility(this.mType === 5 ? Visibility.Visible : Visibility.None)
  369. WebDavMainPage({
  370. offsetX:this.offsetX,
  371. isShowDrawer:this.isShowDrawer,
  372. mType:this.mType,
  373. selectedAccount:this.selectedAccount
  374. })
  375. .visibility(this.mType === 6 ? Visibility.Visible : Visibility.None)
  376. // 抽屉打开时的遮罩层,用于拦截点击事件 这个只能正常尺寸的手机竖屏的才能生效
  377. if (this.isShowDrawer&&this.isPhonePortrait()) {
  378. Column()
  379. .width('100%')
  380. .height('100%')
  381. .backgroundBlurStyle(BlurStyle.BACKGROUND_THIN)
  382. .transition(TransitionEffect.OPACITY.animation({
  383. curve: curves.springMotion(0, 1)
  384. }))
  385. .onClick(() => {
  386. // 点击遮罩层关闭抽屉
  387. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  388. this.isShowDrawer = false
  389. })
  390. })
  391. }
  392. }
  393. .bindSheet($$this.isShowUpdateDialog, this.updateSheet(), {
  394. height: '90%',
  395. dragBar: true,
  396. preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
  397. showClose: true,
  398. blurStyle: BlurStyle.Regular,
  399. title: { title: '更新日志' }
  400. })
  401. }
  402. .gesture(SwipeGesture({ direction: SwipeDirection.Horizontal }).onAction((event: GestureEvent) => {
  403. if (event) {//手势返回
  404. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  405. this.isShowDrawer = !this.isShowDrawer
  406. if(this.isShowDrawer)
  407. this.offsetX = 0
  408. })
  409. }
  410. }))
  411. }
  412. .showControlButton(false)
  413. .minContentWidth(0)
  414. .sideBarWidth(260)
  415. .autoHide(true)
  416. .showSideBar($$this.isShowDrawer)
  417. .onChange((value: boolean) => {
  418. this.isShowDrawer = value
  419. })
  420. }
  421. //是不是hicar的屏幕分辨率
  422. isHiCar() {
  423. return this.isHiCarStatus&&this.curDisplayIsHiCar;
  424. return false;
  425. }
  426. //是不是正常的手机竖屏
  427. isPhonePortrait() {
  428. LogUtil.info('twocold this.currentHeightBreakpoint = '+this.currentHeightBreakpoint)
  429. LogUtil.info('twocold this.currentWidthBreakpoint = '+this.currentWidthBreakpoint)
  430. if(DeviceUtil.getDeviceType() === resourceManager.DeviceType.DEVICE_TYPE_PHONE
  431. &&this.currentHeightBreakpoint == HeightBreakpoint.HEIGHT_LG
  432. &&this.currentWidthBreakpoint==WidthBreakpoint.WIDTH_SM){//如果是手机横屏,返回false
  433. return true
  434. }
  435. return false
  436. }
  437. /**
  438. * 判断是否横屏
  439. * @returns
  440. */
  441. isBigScreen() {
  442. if (this.currentWidthBreakpoint == WidthBreakpoint.WIDTH_LG) {
  443. return true
  444. }
  445. if (DeviceUtil.getDeviceType() === resourceManager.DeviceType.DEVICE_TYPE_PHONE
  446. && this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM
  447. && this.currentHeightBreakpoint == HeightBreakpoint.HEIGHT_LG) {
  448. return false
  449. } else {
  450. return true
  451. }
  452. return false
  453. }
  454. @Builder
  455. getLeftView() {
  456. Column() {
  457. Column() {
  458. this.getDrawerView()
  459. }
  460. .width('100%')
  461. .height('100%')
  462. .onClick((event: ClickEvent) => {
  463. // 点击抽屉内部不关闭,通过返回值阻止事件传播
  464. return true
  465. })
  466. }
  467. // .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'36%':'70%')
  468. .height('100%')
  469. .borderRadius({
  470. topLeft: 0,
  471. topRight: 20,
  472. bottomLeft: 0,
  473. bottomRight: 20
  474. })
  475. // .backgroundColor($r('app.color.silvery'))
  476. // .backgroundColor($r('app.color.index_background'))
  477. .backgroundColor($r('app.color.user_center_card_background'))
  478. .alignItems(HorizontalAlign.Start)
  479. .translate({ x: this.offsetX, y: 0, z: 0 })
  480. .transition({ type: TransitionType.Insert, translate: { x: -DisplayUtil.getWidth(), y: 0 } })
  481. .transition({ type: TransitionType.Delete, translate: { x: -DisplayUtil.getWidth(), y: 0 } })
  482. .gesture(
  483. PanGesture()
  484. .onActionUpdate((event: GestureEvent) => {
  485. // 手势滑动更新抽屉偏移
  486. if (event.offsetX < 0) {
  487. this.offsetX = event.offsetX;
  488. }
  489. })
  490. .onActionEnd(() => {
  491. // 手势结束判断是否关闭抽屉
  492. if (this.offsetX < -DisplayUtil.getWidth() / 15) {
  493. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  494. this.isShowDrawer = false
  495. })
  496. } else {
  497. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  498. this.isShowDrawer = true
  499. this.offsetX = 0
  500. })
  501. }
  502. })
  503. )
  504. }
  505. @State isLogin: boolean = false;
  506. @State userAvatar: Resource = $r('app.media.icon_person2');
  507. @State userAvatarUrl: string = '';
  508. @State isVip: boolean = false;
  509. @State userName: string = '未登录用户';
  510. @State userId: number = 0;
  511. @State hasActiveSubscription: boolean = false;
  512. @State subscriptionName: string = '';
  513. @State subscriptionEndDate: string = '';
  514. // 用户信息卡片
  515. @Builder
  516. buildUserInfoCard() {
  517. Column() {
  518. this.userInfoView()
  519. Column({ space: 20 }) {
  520. SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes })
  521. }
  522. .padding({ bottom:10 })
  523. .width('90%')
  524. }
  525. }
  526. @Builder
  527. userInfoView() {
  528. Column() {
  529. Row() {
  530. Stack({ alignContent: Alignment.BottomEnd }){
  531. Image(this.userAvatarUrl && this.userAvatarUrl.length > 0 ? this.userAvatarUrl : this.userAvatar)
  532. .width(55)
  533. .height(55)
  534. .margin({ left: 12 })
  535. .borderRadius('50%')
  536. .clip(true)
  537. // .fillColor(this.themeColor)
  538. // .backgroundColor(this.isDarkMode ? Color.Black : Color.White)
  539. Column() {
  540. Text('VIP')
  541. .fontSize(9)
  542. .padding(2)
  543. .textAlign(TextAlign.Center)
  544. .fontWeight(FontWeight.Bolder)
  545. .fontColor(Color.White)
  546. }
  547. .width(28)
  548. .height(16)
  549. .visibility(Utility.isNoble()?Visibility.Visible:Visibility.None)
  550. .borderRadius(15)
  551. .backgroundColor(this.themeColor)
  552. }
  553. Column() {
  554. Row() {
  555. Text(this.isLogin ? this.userName : '未登录用户')
  556. .fontSize(14)
  557. // .fontWeight(FontWeight.Bold)
  558. // .fontColor(this.isDarkMode ? Color.White : Color.Black)
  559. .textAlign(TextAlign.Start)
  560. .maxLines(1)
  561. .width(110)
  562. .margin({ right: 12 })
  563. }
  564. .justifyContent(FlexAlign.Start)
  565. .margin({ top: 2 })
  566. if (this.isLogin) {
  567. if (this.hasActiveSubscription) {
  568. // Text(this.subscriptionName)
  569. // .fontSize(13)
  570. // .fontColor(themeColorWithAlpha(this.themeColor, 0.8, false))
  571. // .textAlign(TextAlign.Start)
  572. // .padding({top:5})
  573. this.TimeTextBuilder()
  574. } else {
  575. Text('普通用户')
  576. .fontSize(13)
  577. .fontColor(this.isDarkMode ? Color.White : Color.Grey)
  578. .textAlign(TextAlign.Start)
  579. .padding({top:5})
  580. this.TimeTextBuilder()
  581. }
  582. } else {
  583. this.TimeTextBuilder()
  584. }
  585. }
  586. .alignItems(HorizontalAlign.Start)
  587. .width(80)
  588. .margin({ left: 10 })
  589. }
  590. .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.7})
  591. .onClick(() => {
  592. // if (!this.isLogin) {
  593. this.mType = 1
  594. if (!this.isBigScreen()) {
  595. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  596. this.isShowDrawer = false
  597. })
  598. // }
  599. }
  600. })
  601. .width('100%')
  602. .padding(10)
  603. }
  604. .backgroundColor($r('app.color.user_center_card_background'))
  605. .borderRadius(24)
  606. .width('86%')
  607. .padding(8)
  608. .margin({ left: 10, right: 10, top: this.topRectHeight + 10,bottom:10 })
  609. .shadow({
  610. radius: 8,
  611. color: 0x11000000,
  612. offsetX: 0,
  613. offsetY: 2
  614. })
  615. }
  616. @Builder
  617. TimeTextBuilder() {
  618. Text(Utility.getTimePeriod())
  619. .fontSize(13)
  620. .margin({ top: 5 })
  621. .fontColor($r('app.color.text_color'))
  622. .align(Alignment.Start)
  623. }
  624. @State ratioL: number = 1;
  625. @State isRefreshing: boolean = false;
  626. @State maxRefreshingHeight: number = 100.0;
  627. private contentNode?: ComponentContent<Object> = undefined;
  628. /**
  629. * 动态生成抽屉菜单内容
  630. * 根据 isShowSponsorship 展示不同菜单项
  631. */
  632. @Builder
  633. getDrawerView() {
  634. Refresh({ refreshing: $$this.isRefreshing, refreshingContent: this.contentNode }) {
  635. List({ space: 0, scroller: this.scroller }) {
  636. ListItemGroup({ header: this.buildUserInfoCard() }) {
  637. if(this.tabSelectedIndexes[0]==0){//分类
  638. this.buildTabCate()
  639. }else if(this.tabSelectedIndexes[0]==1){//歌单
  640. this.buildPlaylistTab()
  641. }else if(this.tabSelectedIndexes[0]==2){//网盘
  642. this.buildCloudStorageTab()
  643. }
  644. }
  645. }
  646. .scrollBar(BarState.Off)
  647. .width('86%')
  648. .borderRadius(20)
  649. .margin({
  650. bottom: 20,
  651. left: 10,
  652. right: 10,
  653. top: 10
  654. })
  655. .alignListItem(ListItemAlign.Center)
  656. .layoutWeight(1)
  657. .backgroundColor($r('app.color.left_draw_bg'))
  658. .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
  659. }
  660. .pullDownRatio(this.ratioL)
  661. .pullToRefresh(true)
  662. .refreshOffset(0)
  663. .onOffsetChange((offset: number) => {
  664. // 越接近最大距离,下拉跟手系数越小。
  665. this.ratioL = 1 - Math.pow((offset / this.maxRefreshingHeight), 3);
  666. })
  667. .onStateChange((refreshStatus: RefreshStatus) => {
  668. console.info('onecold Refresh onStatueChange state is ' + refreshStatus);
  669. })
  670. .onRefreshing(async () => {
  671. if(this.tabSelectedIndexes[0]==0){//分类
  672. this.isRefreshing = false
  673. }else if(this.tabSelectedIndexes[0]==1){//歌单
  674. this.loadPlaylistList()
  675. }else if(this.tabSelectedIndexes[0]==2){//网盘
  676. this.loadWebDavAccounts()
  677. }
  678. })
  679. }
  680. @Builder
  681. buildTabCate() {
  682. ForEach(mainViewModel.getDrawerData(), (item: ItemData, index: number) => {
  683. ListItem() {
  684. Button({ type: ButtonType.Capsule, stateEffect: true }) {
  685. Row() {
  686. // 菜单图标
  687. if (typeof item.img === 'object' && item.img !== null && (item.img as sysResource).type === 'symbol') {
  688. SymbolGlyph((item.img as sysResource).value as Resource)// .size({ width: 22, height: 22 })
  689. .fontSize(22)
  690. .fontColor([this.themeColor])
  691. .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
  692. .alignSelf(ItemAlign.Center)
  693. .margin({ left: 15 })
  694. } else {
  695. Image(item.img as Resource)
  696. .height(22)
  697. .alignSelf(ItemAlign.Center)
  698. .fillColor(this.themeColor)
  699. .margin({ left: 15 })
  700. }
  701. // 菜单标题
  702. Text(item.title)
  703. .margin({ left: 10, right: 20 })
  704. .fontSize(15)
  705. .fontColor(this.isTextSelected(index) ? this.themeColor : $r('app.color.index_tab_font_color'))
  706. .fontWeight(480)
  707. Blank()
  708. // 右侧箭头
  709. Image($r('app.media.arrow_right'))
  710. .width(22)
  711. .height(22)
  712. .margin({ left: 20, right: 0 })
  713. .align(Alignment.Center)
  714. }
  715. .width('100%')
  716. .height(55)
  717. }
  718. .backgroundColor(Color.Transparent)
  719. .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
  720. .onClick(async () => {
  721. // 根据 item.id 跳转或切换功能
  722. switch (item.id) {
  723. case MainViewModel.MENU_MUSIC:
  724. this.mType = 0
  725. this.modeType = 0
  726. this.currentSongListID = ''
  727. this.doShowDrawer()
  728. break
  729. case MainViewModel.MENU_FILE_SCAN:
  730. this.mType = 2
  731. this.doShowDrawer()
  732. break
  733. case MainViewModel.MENU_CHARTS:
  734. this.mType = 3
  735. this.modeType = 0
  736. this.doShowDrawer()
  737. break
  738. case MainViewModel.MENU_MIEDIA_KU:
  739. this.modeType = 1
  740. this.mType = 0
  741. this.currentSongListID = ''
  742. this.doShowDrawer()
  743. break
  744. case MainViewModel.MENU_MIEDIA_ARTIST:
  745. this.modeType = 2
  746. this.mType = 0
  747. this.currentSongListID = ''
  748. this.doShowDrawer()
  749. break
  750. case MainViewModel.MENU_MIEDIA_ALBUM:
  751. this.modeType = 3
  752. this.mType = 0
  753. this.currentSongListID = ''
  754. this.doShowDrawer()
  755. break
  756. case MainViewModel.MENU_SETTING:
  757. this.mType = 4
  758. this.doShowDrawer()
  759. break
  760. case MainViewModel.MENU_VIP:
  761. router.pushUrl({
  762. url: 'pages/VipPage'
  763. }, router.RouterMode.Single);
  764. break
  765. case MainViewModel.MENU_USER:
  766. this.mType = 1
  767. this.doShowDrawer()
  768. break
  769. case MainViewModel.MENU_NET_CONNECT:
  770. this.mType = 1
  771. this.doShowDrawer()
  772. break
  773. case MainViewModel.MENU_SIMI:
  774. router.pushUrl({
  775. url: 'pages/VerifyPage'
  776. });
  777. break
  778. case MainViewModel.MENU_DUTY:
  779. router.pushUrl({
  780. url: 'pages/WebIndex',
  781. params: { titleName: '用户协议', webUrl: CommonConstants.NEW_DUTY }
  782. });
  783. break
  784. case MainViewModel.MENU_HAOPING:
  785. Utility.gotoMarket(getContext(this) as common.UIAbilityContext, this.bundleName)
  786. break
  787. case MainViewModel.MENU_ABOUT:
  788. this.mType = 5
  789. this.doShowDrawer()
  790. break
  791. case MainViewModel.MENU_UPDATE:
  792. AlertDialog.show({
  793. title: '版本更新',
  794. message: '当前版本为最新版本:' + this.versionName,
  795. autoCancel: true,
  796. alignment: DialogAlignment.Center,
  797. offset: { dx: 0, dy: -20 }, //在Y轴方向上的编译量
  798. confirm: {
  799. value: '确定',
  800. fontColor: Color.White,
  801. backgroundColor: $r('app.color.title_bar_bg'),
  802. action: () => {
  803. }
  804. }
  805. })
  806. break
  807. case MainViewModel.MENU_YSZC:
  808. router.pushUrl({
  809. url: 'pages/WebIndex',
  810. params: { titleName: '隐私政策', webUrl: CommonConstants.NEW_YS_HW }
  811. });
  812. break
  813. case MainViewModel.MENU_SHARE:
  814. gotoShare(this.context,this.appName,this.bundleName)
  815. break
  816. }
  817. })
  818. }
  819. .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
  820. .animation({ duration: 600, curve: Curve.Ease, delay: 60 * index }))
  821. .width('90%')
  822. .height(55)
  823. })
  824. }
  825. isTextSelected(index:number):boolean{
  826. if(this.isShowTitleBar&&!this.isHiCar()){
  827. return this.mType ==index
  828. }else{
  829. if(this.mType == 0){
  830. return this.modeType == index
  831. }
  832. return this.mType+3 == index
  833. }
  834. return false
  835. }
  836. doShowDrawer(){
  837. if (!this.isBigScreen()) {
  838. this.getUIContext()?.animateTo({ duration: 555 }, () => {
  839. this.isShowDrawer = false
  840. })
  841. }
  842. }
  843. @Builder
  844. updateSheet() {
  845. Scroll() {
  846. Column() {
  847. OnlineUpdateLog()
  848. }
  849. }
  850. .width('100%')
  851. .height('100%')
  852. }
  853. // /**
  854. // * ================== 穿山甲广告相关 ==================
  855. // */
  856. // /** Banner广告对象 */
  857. // private declare bannerAd: CSJNativeExpressAd;
  858. // /** 广告加载状态 */
  859. // @State private status: string = "未加载"
  860. // /** 是否展示广告 */
  861. // @State private isShowAd: boolean = false
  862. // /** 广告位配置信息 */
  863. // private declare mAdSlot: AdSlot;
  864. // /** 服务端bidding广告内容(可选) */
  865. // private mBiddingAdm = ''
  866. // /** 广告加载监听器 */
  867. // private expressLoadAdListener: NativeExpressAdListener = {
  868. // /**
  869. // * 广告加载失败回调
  870. // */
  871. // onError: (code: number, message: string) => {
  872. // console.error("加载广告失败,code=" + code + ",message=" + message);
  873. // this.status = "加载广告失败,code=" + code + ",message=" + message;
  874. // },
  875. // /**
  876. // * 广告加载成功回调
  877. // * @param ads 返回的广告列表
  878. // */
  879. // onNativeExpressAdLoad: (ads: ArrayList<CSJNativeExpressAd>) => {
  880. // console.log("BannerExpressAdPage==onNativeExpressAdLoad......success");
  881. // if (ads && ads.length > 0) {
  882. // ads.forEach((ad: CSJNativeExpressAd, idx: number) => {
  883. // // 设置广告交互监听
  884. // ad.setExpressInteractionListener({
  885. // /** 广告点击回调 */
  886. // onAdClicked: (type: number) => {
  887. // console.log("BannerExpressAdPage==onAdClicked......");
  888. // },
  889. // /** 广告展示回调 */
  890. // onAdShow: (type: number) => {
  891. // console.log("BannerExpressAdPage==onAdShow......");
  892. // },
  893. // /** 模板渲染失败回调 */
  894. // onRenderFail: (code: number, msg: string) => {
  895. // console.log("BannerExpressAdPage==onRenderFail...code=" + code + ",msg=" + msg);
  896. // },
  897. // /** 模板渲染成功回调 */
  898. // onRenderSuccess: (width: number, height: number) => {
  899. // console.log("BannerExpressAdPage==onRenderSuccess......width=" + width + ",height=" + height);
  900. // this.bannerAd = ad;
  901. // this.status = "广告加载完成待展示";
  902. // this.showBannerAd()
  903. // }
  904. // })
  905. // // 设置广告轮播时间
  906. // ad.setSlideIntervalTime(30 * 1000);//设置轮播时间长
  907. // this.setDislikeCallback(ad); //设置dislike
  908. // ad.render(this.getUIContext()) // 开始渲染广告
  909. // this.status = "广告加载中...";
  910. // });
  911. // }
  912. // }
  913. // }
  914. //
  915. // /**
  916. // * 设置广告 dislike 回调
  917. // * @param ad 广告对象
  918. // */
  919. // private setDislikeCallback(ad: CSJNativeExpressAd) {
  920. // ad.setDislikeCallback({
  921. // /** dislike 弹窗显示 */
  922. // onShow: () => {
  923. // console.log("BannerExpressAdPage==dislike......show");
  924. // },
  925. // /** 选择 dislike 选项 */
  926. // onSelected: (position: number, value: string, enforceRemove: boolean) => {
  927. // this.isShowAd = false;
  928. // console.log("BannerExpressAdPage==dislike......onSelected:position=" + position + ",value:" + value + ",enforce=" + enforceRemove);
  929. // },
  930. // /** 点击取消 dislike */
  931. // onCancel: () => {
  932. // console.log("BannerExpressAdPage==dislike......onCancel");
  933. // }
  934. // })
  935. // }
  936. //
  937. // /**
  938. // * 加载Banner广告
  939. // * @param rit 广告位ID
  940. // */
  941. // loadBannerAd(rit: string) {
  942. // // 仅在满足条件时加载广告
  943. // if(!Utility.isNoble()){
  944. // return
  945. // }
  946. // if(!Utility.isPassInstallTime(2)){
  947. // return
  948. // }
  949. // this.isShowAd = false;
  950. // let adCreator:CSJAdCreator = CSJAdSdk.getAdCreator()
  951. // this.mAdSlot = new AdSlotBuilder()
  952. // .setCodeId(rit)
  953. // .setAcceptSize(CSJUtil.BANNER_WIGTH, CSJUtil.BANNER_HEIGHT)
  954. // .setAdCount(1)
  955. // .setBidAdm(this.mBiddingAdm)
  956. // .build()
  957. // PrintBiddingTokenUtils.printBiddingToken(this.mAdSlot, adCreator);
  958. // adCreator.loadBannerAd(this.mAdSlot, this.expressLoadAdListener)
  959. // this.status = "广告加载中..."
  960. // }
  961. @StorageProp('currentHeightBreakpoint') currentHeightBreakpoint: HeightBreakpoint | undefined =
  962. HeightBreakpoint.HEIGHT_LG;
  963. @StorageProp('currentWidthBreakpoint') currentWidthBreakpoint: WidthBreakpoint | undefined = WidthBreakpoint.WIDTH_SM;
  964. @StorageProp('topRectHeight') topRectHeight: number = px2vp(AppUtil.getStatusBarHeight());
  965. //是否是Pura X外屏,或者小屏幕
  966. isPuraWP() {
  967. return this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM
  968. && this.currentHeightBreakpoint === HeightBreakpoint.HEIGHT_MD
  969. }
  970. //是否是Pura X外屏,或者小屏幕或者手机横屏
  971. isCoverOpacity() {
  972. if (this.isPuraWP()) {
  973. return true
  974. }
  975. if (this.isPhoneLan()) {
  976. return true
  977. }
  978. if (deviceInfo.marketName.includes('Pura X')
  979. && this.currentHeightBreakpoint === HeightBreakpoint.HEIGHT_SM) {
  980. return true
  981. }
  982. return false
  983. }
  984. //是不是手机横屏
  985. isPhoneLan() {
  986. if (DeviceUtil.getDeviceType() === resourceManager.DeviceType.DEVICE_TYPE_PHONE
  987. && this.currentBreakpoint !== BreakpointTypeEnum.SM) {
  988. if (DisplayUtil.getFoldStatus() === 0) {
  989. return true
  990. }
  991. }
  992. return false
  993. }
  994. isLoginChange() {
  995. this.refreshUserInfoState();
  996. }
  997. /**
  998. * 构建歌单tab内容
  999. */
  1000. @Builder
  1001. buildPlaylistTab() {
  1002. // 创建歌单按钮
  1003. ListItem() {
  1004. Button({ type: ButtonType.Capsule, stateEffect: true }) {
  1005. Row() {
  1006. SymbolGlyph($r('sys.symbol.plus_circle'))
  1007. .fontSize(22)
  1008. .fontColor([this.themeColor])
  1009. .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
  1010. .alignSelf(ItemAlign.Center)
  1011. .margin({ left: 25 })
  1012. Text('创建歌单')
  1013. .margin({ left: 10, right: 20 })
  1014. .fontSize(14)
  1015. .fontColor($r('app.color.index_tab_font_color'))
  1016. .fontWeight(480)
  1017. Blank()
  1018. Image($r('app.media.arrow_right'))
  1019. .width(22)
  1020. .height(22)
  1021. .margin({ left: 20, right: 0 })
  1022. .align(Alignment.Center)
  1023. }
  1024. .width('100%')
  1025. .height(55)
  1026. }
  1027. .backgroundColor(Color.Transparent)
  1028. .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
  1029. .onClick(() => {
  1030. this.showCreatePlaylistDialog()
  1031. })
  1032. }
  1033. // 歌单列表
  1034. ForEach(this.playlistList, (playlist: Playlist,index:number) => {
  1035. ListItem() {
  1036. Button({ type: ButtonType.Capsule, stateEffect: true }) {
  1037. Row() {
  1038. Image(playlist.coverPath || $r('app.media.hm_playlist'))
  1039. .width(22)
  1040. .height(22)
  1041. .margin({ left: 25 })
  1042. .borderRadius(4)
  1043. .fillColor(this.themeColor)
  1044. .clip(true)
  1045. Column() {
  1046. Text(playlist.name)
  1047. .margin({ left: 10, right: 20 })
  1048. .fontSize(15)
  1049. .fontColor($r('app.color.index_tab_font_color'))
  1050. .fontWeight(480)
  1051. .maxLines(1)
  1052. .textOverflow({ overflow: TextOverflow.Ellipsis })
  1053. Text(`${playlist.songCount}首`)
  1054. .margin({ left: 10, right: 20 })
  1055. .fontSize(12)
  1056. .fontColor($r('app.color.index_tab_font_color'))
  1057. .opacity(0.7)
  1058. }
  1059. .alignItems(HorizontalAlign.Start)
  1060. Blank()
  1061. Image($r('app.media.arrow_right'))
  1062. .width(22)
  1063. .height(22)
  1064. .margin({ left: 20, right: 0 })
  1065. .align(Alignment.Center)
  1066. }
  1067. .width('100%')
  1068. .height(55)
  1069. }
  1070. .backgroundColor(Color.Transparent)
  1071. .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
  1072. .onClick(async () => {
  1073. if(playlist.songCount==0){
  1074. this.openPlaylist(playlist)
  1075. }else{
  1076. this.doShowDrawer();
  1077. this.mType = 0
  1078. this.modeType = 4
  1079. this.currentSongListName = playlist.name;
  1080. this.currentSongListID = playlist.id;
  1081. }
  1082. })
  1083. .bindContextMenu(this.MenuBuilder(playlist), ResponseType.LongPress,
  1084. {
  1085. preview: MenuPreviewMode.IMAGE,
  1086. previewAnimationOptions: { scale: [0.8, 1.0] },
  1087. })
  1088. .bindContextMenu(this.MenuBuilder(playlist), ResponseType.RightClick,
  1089. {
  1090. preview: MenuPreviewMode.IMAGE,
  1091. previewAnimationOptions: { scale: [0.8, 1.0] },
  1092. })
  1093. }
  1094. .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
  1095. .animation({ duration: 600, curve: Curve.Ease, delay: 60 * index }))
  1096. })
  1097. }
  1098. /**
  1099. * 构建网盘tab内容 - 从数据库获取所有网盘账户
  1100. * 支持多种类型的网盘账户(目前支持WebDAV,将来可扩展其他类型)
  1101. */
  1102. @Builder
  1103. buildCloudStorageTab() {
  1104. // 当前只支持网盘账户,将来可以在这里添加其他类型的网盘账户
  1105. // 例如:OneDrive, Google Drive, Dropbox等
  1106. // 添加新账户按钮
  1107. ListItem() {
  1108. Button({ type: ButtonType.Capsule, stateEffect: true }) {
  1109. Row() {
  1110. SymbolGlyph($r('sys.symbol.plus_circle'))
  1111. .fontSize(22)
  1112. .fontColor([this.themeColor])
  1113. .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
  1114. .alignSelf(ItemAlign.Center)
  1115. .margin({ left: 25 })
  1116. Text(`添加${getRemoteDriveAccountLabel()}`)
  1117. .margin({ left: 10, right: 20 })
  1118. .fontSize(14)
  1119. .fontColor($r('app.color.index_tab_font_color'))
  1120. .fontWeight(480)
  1121. Blank()
  1122. Image($r('app.media.arrow_right'))
  1123. .width(22)
  1124. .height(22)
  1125. .margin({ left: 20, right: 0 })
  1126. .align(Alignment.Center)
  1127. }
  1128. .width('100%')
  1129. .height(55)
  1130. }
  1131. .backgroundColor(Color.Transparent)
  1132. .bindMenu(this.AddMenuBuilder)
  1133. .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
  1134. }
  1135. // 显示所有网盘账户
  1136. ForEach(this.webDavAccounts, (account: WebDavAccount,index:number) => {
  1137. ListItem() {
  1138. Button({ type: ButtonType.Capsule, stateEffect: true }) {
  1139. Row() {
  1140. // 账户封面或默认图标
  1141. Stack() {
  1142. Image(account.coverPath?account.coverPath:$r('app.media.cloudDisk'))
  1143. .width(25)
  1144. .height(25)
  1145. .borderRadius(4)
  1146. .fillColor(this.themeColor)
  1147. .objectFit(ImageFit.Cover)
  1148. }
  1149. .margin({ left: 20 })
  1150. Column() {
  1151. // 账户名称
  1152. Text(account.name)
  1153. .margin({ left: 8, right: 20 })
  1154. .fontSize(15)
  1155. .fontColor(this.selectedAccount==account?this.themeColor:$r('app.color.text_color'))
  1156. .fontWeight(480)
  1157. .maxLines(1)
  1158. .textOverflow({ overflow: TextOverflow.Ellipsis })
  1159. Row() {
  1160. // 账户类型标签
  1161. Text(getRemoteDriveDisplayLabel(account.webType))
  1162. .fontSize(10)
  1163. .fontColor(this.selectedAccount==account?this.themeColor:$r('app.color.index_tab_font_color'))
  1164. .opacity(0.8)
  1165. .padding({ left: 8, top: 2, bottom: 2 })
  1166. .borderRadius(3)
  1167. // 服务器地址
  1168. Text(`@${account.isUseLocalHost ? account.localHost : account.host}:${account.port}`)
  1169. .fontSize(12)
  1170. .fontColor(this.selectedAccount==account?this.themeColor:$r('app.color.index_tab_font_color'))
  1171. .opacity(0.7)
  1172. .maxLines(1)
  1173. .padding({ right: 8, top: 2, bottom: 2 })
  1174. .textOverflow({ overflow: TextOverflow.Ellipsis })
  1175. }
  1176. }
  1177. .alignItems(HorizontalAlign.Start)
  1178. Blank()
  1179. Image($r('app.media.arrow_right'))
  1180. .width(22)
  1181. .height(22)
  1182. .margin({ left: 20, right: 0 })
  1183. .align(Alignment.Center)
  1184. }
  1185. .width('100%')
  1186. .height(60)
  1187. }
  1188. .backgroundColor(Color.Transparent)
  1189. .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.8 })
  1190. .onClick(() => {
  1191. console.info('heanup', '点击网盘账户:', account.name)
  1192. this.selectWebDavAccount(account)
  1193. })
  1194. .bindContextMenu(this.MenuDavBuilder(account), ResponseType.LongPress,
  1195. {
  1196. preview: MenuPreviewMode.IMAGE,
  1197. previewAnimationOptions: { scale: [0.8, 1.0] },
  1198. })
  1199. .bindContextMenu(this.MenuDavBuilder(account), ResponseType.RightClick,
  1200. {
  1201. preview: MenuPreviewMode.IMAGE,
  1202. previewAnimationOptions: { scale: [0.8, 1.0] },
  1203. })
  1204. }
  1205. .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
  1206. .animation({ duration: 600, curve: Curve.Ease, delay: 60 * index }))
  1207. })
  1208. // 如果没有账户,显示提示信息
  1209. if (this.webDavAccounts.length === 0) {
  1210. ListItem() {
  1211. Text(`暂无${getRemoteDriveAccountLabel()},点击上方按钮添加`)
  1212. .fontSize(14)
  1213. .fontColor($r('app.color.index_tab_font_color'))
  1214. .opacity(0.6)
  1215. .textAlign(TextAlign.Center)
  1216. .width('100%')
  1217. .padding(20)
  1218. }
  1219. }
  1220. }
  1221. @Builder
  1222. AddMenuBuilder() {
  1223. Menu() {
  1224. MenuItem({
  1225. symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.smallcircle_filled_circle')),
  1226. content: $r('app.string.webdav')
  1227. })
  1228. .onClick(async () => {
  1229. this.showRemoteDriveAccountDialog(false,undefined,RemoteDriveType.WebDav)
  1230. })
  1231. MenuItem({
  1232. symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.smallcircle_filled_circle')),
  1233. content: $r('app.string.smb')
  1234. })
  1235. .onClick(async () => {
  1236. this.showRemoteDriveAccountDialog(false,undefined,RemoteDriveType.Smb)
  1237. })
  1238. MenuItem({
  1239. symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.smallcircle_filled_circle')),
  1240. content: $r('app.string.navidrome')
  1241. })
  1242. .onClick(async () => {
  1243. this.showRemoteDriveAccountDialog(false,undefined,RemoteDriveType.Navidrome)
  1244. })
  1245. }.attributeModifier(new MenuModifier())
  1246. }
  1247. @Builder
  1248. MenuBuilder(playlist: Playlist) {
  1249. Menu(){
  1250. MenuItem({
  1251. symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.square_and_pencil')),
  1252. content: '编辑歌单'
  1253. })
  1254. .onClick(async() => {
  1255. this.openPlaylist(playlist)
  1256. })
  1257. MenuItem({
  1258. symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.trash')),
  1259. content: '删除歌单'
  1260. })
  1261. .onClick(async() => {
  1262. this.deletePlaylist(playlist)
  1263. })
  1264. }
  1265. }
  1266. @Builder
  1267. MenuDavBuilder(account: WebDavAccount) {
  1268. Menu(){
  1269. MenuItem({
  1270. symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.square_and_pencil')),
  1271. content: '编辑'
  1272. })
  1273. .onClick(async() => {
  1274. this.showRemoteDriveAccountDialog(true,account)
  1275. })
  1276. MenuItem({
  1277. symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.trash')),
  1278. content: '删除'
  1279. })
  1280. .onClick(async() => {
  1281. this.deleteWebDavAccount(account)
  1282. })
  1283. }
  1284. }
  1285. /**
  1286. * 删除网盘账户
  1287. */
  1288. async deleteWebDavAccount(account: WebDavAccount) {
  1289. try {
  1290. // 显示确认对话框
  1291. this.getUIContext().showAlertDialog({
  1292. title: '删除账户',
  1293. message: `确定要删除webdav账户"${account.name}"吗?`,
  1294. primaryButton: {
  1295. value: '取消',
  1296. action: () => {}
  1297. },
  1298. secondaryButton: {
  1299. value: '删除',
  1300. fontColor: Color.Red,
  1301. action: async () => {
  1302. try {
  1303. await this.webdavManager.removeAccount(account)
  1304. ToastUtil.showToast('网盘账户删除成功')
  1305. // 重新加载网盘账户列表
  1306. await this.loadWebDavAccounts()
  1307. LogUtil.info('heanup NewIndex', '网盘账户删除成功:', account.name)
  1308. } catch (error) {
  1309. LogUtil.error('heanup NewIndex', `删除网盘账户失败: ${(error as Error).message}`)
  1310. ToastUtil.showToast('删除失败')
  1311. }
  1312. }
  1313. }
  1314. })
  1315. } catch (error) {
  1316. LogUtil.error('heanup NewIndex', `删除网盘账户操作失败: ${(error as Error).message}`)
  1317. ToastUtil.showToast('操作失败')
  1318. }
  1319. }
  1320. /**
  1321. * 删除歌单
  1322. */
  1323. async deletePlaylist(playlist: Playlist) {
  1324. if (playlist&&this.playlistTable) {
  1325. // 显示确认对话框
  1326. AlertDialog.show({
  1327. title: '删除歌单',
  1328. message: `确定要删除歌单"${playlist.name}"吗?此操作不可撤销。`,
  1329. primaryButton: {
  1330. value: '取消',
  1331. action: () => {}
  1332. },
  1333. secondaryButton: {
  1334. value: '删除',
  1335. fontColor: Color.Red,
  1336. action: async () => {
  1337. if (this.playlistTable) {
  1338. const success = await this.playlistTable.deletePlaylist(playlist.id)
  1339. if (success) {
  1340. ToastUtil.showToast('歌单删除成功')
  1341. // 发送刷新事件
  1342. emitter.emit({ eventId: EventConstants.EVENT_PLAYLIST_REFRESH }, {})
  1343. } else {
  1344. ToastUtil.showToast('歌单删除失败')
  1345. }
  1346. }
  1347. }
  1348. }
  1349. })
  1350. }
  1351. }
  1352. /**
  1353. * 显示创建歌单对话框
  1354. */
  1355. showCreatePlaylistDialog() {
  1356. if (!this.playlistTable) {
  1357. ToastUtil.showToast('歌单功能初始化中,请稍后再试')
  1358. return
  1359. }
  1360. // 使用新的歌单对话框,支持自定义封面
  1361. showCreatePlaylistDialog(
  1362. async (name: string, description: string, coverPath?: string) => {
  1363. // 创建歌单
  1364. const success = await this.playlistTable!.createPlaylist(name, description, coverPath)
  1365. if (success) {
  1366. ToastUtil.showToast('歌单创建成功')
  1367. // 刷新歌单列表
  1368. await this.loadPlaylistList()
  1369. // 发送歌单刷新事件
  1370. emitter.emit({ eventId: EventConstants.EVENT_PLAYLIST_REFRESH }, {})
  1371. } else {
  1372. ToastUtil.showToast('歌单创建失败')
  1373. }
  1374. },
  1375. () => {
  1376. // 取消创建歌单
  1377. }
  1378. )
  1379. }
  1380. /**
  1381. * 打开歌单详情
  1382. */
  1383. openPlaylist(playlist: Playlist) {
  1384. try {
  1385. // 跳转到歌单详情页面
  1386. router.pushUrl({
  1387. url: 'pages/PlaylistDetailPage',
  1388. params: {
  1389. playlist: playlist
  1390. }
  1391. }).catch((err: Error) => {
  1392. console.error('跳转到歌单详情页面失败:', err.message);
  1393. ToastUtil.showToast('打开歌单失败');
  1394. });
  1395. } catch (error) {
  1396. console.error('打开歌单失败:', error);
  1397. ToastUtil.showToast('打开歌单失败');
  1398. }
  1399. }
  1400. /**
  1401. * 初始化歌单数据库
  1402. */
  1403. async initPlaylistTable() {
  1404. try {
  1405. this.playlistTable = new PlaylistTable(this.context)
  1406. console.info('onecold 歌单数据库初始化成功')
  1407. // 等待数据库初始化完成后再加载数据
  1408. setTimeout(async () => {
  1409. await this.loadPlaylistList()
  1410. }, 500) // 延迟500ms确保数据库初始化完成
  1411. } catch (error) {
  1412. console.error('初始化歌单数据库失败:', error)
  1413. }
  1414. }
  1415. /**
  1416. * 加载歌单列表
  1417. */
  1418. async loadPlaylistList() {
  1419. try {
  1420. LogUtil.info('heanup NewIndex', '开始加载歌单列表')
  1421. if (this.playlistTable) {
  1422. const playlists = await this.playlistTable.queryAllPlaylists()
  1423. // 强制触发UI更新
  1424. this.playlistList = playlists.slice()
  1425. LogUtil.info('heanup NewIndex', `成功加载 ${playlists.length} 个歌单`)
  1426. } else {
  1427. LogUtil.warn('heanup NewIndex', '歌单表未初始化')
  1428. }
  1429. this.isRefreshing = false
  1430. } catch (error) {
  1431. LogUtil.error('heanup NewIndex', `加载歌单列表失败: ${(error as Error).message}`)
  1432. this.isRefreshing = false
  1433. }
  1434. }
  1435. /**
  1436. * 初始化WebDAV管理器
  1437. */
  1438. async initWebDavManager() {
  1439. try {
  1440. // 设置WebDAV管理器的上下文
  1441. this.webdavManager.setContext(this.context)
  1442. // 创建网盘账户表
  1443. await this.webdavManager.createWebDavTableInDB()
  1444. // 订阅WebDAV管理器事件
  1445. this.webdavManager.subscribe((event: string) => {
  1446. LogUtil.info('heanup NewIndex', '收到WebDAV事件:', event)
  1447. if (event === 'QueryAccountsSucceed') {
  1448. this.webDavAccounts = this.webdavManager.getAllWebDavAccounts().slice()
  1449. }
  1450. })
  1451. // 首页EntryAblility去加载网盘账户了。所以这边不加载
  1452. // await this.loadWebDavAccounts()
  1453. LogUtil.info('heanup NewIndex', 'WebDAV管理器初始化成功')
  1454. } catch (error) {
  1455. LogUtil.error('heanup NewIndex', `初始化WebDAV管理器失败: ${(error as Error).message}`)
  1456. }
  1457. }
  1458. /**
  1459. * 加载网盘账户列表
  1460. */
  1461. async loadWebDavAccounts() {
  1462. try {
  1463. LogUtil.info('heanup NewIndex', '开始加载网盘账户列表')
  1464. await this.webdavManager.queryWebDavAccountsFromDB()
  1465. // 强制触发UI更新
  1466. this.webDavAccounts = this.webdavManager.getAllWebDavAccounts().slice()
  1467. this.isRefreshing = false
  1468. LogUtil.info('heanup NewIndex', `成功加载 ${this.webDavAccounts.length} 个网盘账户`)
  1469. } catch (error) {
  1470. this.isRefreshing = false
  1471. LogUtil.error('heanup NewIndex', `加载网盘账户列表失败: ${(error as Error).message}`)
  1472. }
  1473. }
  1474. /**
  1475. * 选择网盘账户
  1476. */
  1477. selectWebDavAccount(account: WebDavAccount) {
  1478. try {
  1479. LogUtil.info('heanup NewIndex', '选择网盘账户:', account.name)
  1480. // 如果账户未激活,先激活它
  1481. if (!account.isActivate) {
  1482. // 先将所有账户设为未激活
  1483. this.webDavAccounts.forEach(acc => {
  1484. acc.isActivate = false
  1485. })
  1486. // 激活选中的账户
  1487. account.isActivate = true
  1488. // 更新数据库中的激活状态
  1489. this.webdavManager.editAccount(account).then(() => {
  1490. LogUtil.info('heanup NewIndex', '网盘账户编辑成功:', account.name)
  1491. }).catch((error: Error) => {
  1492. LogUtil.error('heanup NewIndex', `编辑网盘账户失败: ${error.message}`)
  1493. ToastUtil.showToast('编辑账户失败')
  1494. })
  1495. }
  1496. this.selectedAccount = account
  1497. // 切换到WebDAV页面
  1498. this.mType = 6
  1499. this.doShowDrawer()
  1500. } catch (error) {
  1501. LogUtil.error('heanup NewIndex', `选择网盘账户失败: ${(error as Error).message}`)
  1502. ToastUtil.showToast('选择账户失败')
  1503. }
  1504. }
  1505. /**
  1506. * 显示添加网盘账户对话框
  1507. */
  1508. @State addDavDialogId:number = 1
  1509. showRemoteDriveAccountDialog(isEditMode?: boolean,account?: WebDavAccount,driveType?:number) {
  1510. const node: FrameNode | null = this.getUIContext().getFrameNodeById("test_text") || null;
  1511. this.getUIContext().getPromptAction().openCustomDialog({
  1512. builder: () => {
  1513. this.webDavAccountBuilder(isEditMode,account,driveType)
  1514. },
  1515. levelMode: LevelMode.EMBEDDED, // 启用页面级弹出框
  1516. levelUniqueId: node?.getUniqueId(), // 设置页面级弹出框所在页面的任意节点ID
  1517. immersiveMode: ImmersiveMode.EXTEND, // 设置页面级弹出框蒙层的显示模式
  1518. }).then((dialogId: number) => {
  1519. this.addDavDialogId = dialogId;
  1520. })
  1521. }
  1522. @Builder
  1523. webDavAccountBuilder(isEditMode?: boolean,account?: WebDavAccount,driveType?:number) {
  1524. RemoteDriveAccountDialog({
  1525. isEditMode: isEditMode,
  1526. account: account,
  1527. driveType: driveType,
  1528. onCancel: () => {
  1529. // 取消添加
  1530. this.getUIContext().getPromptAction().closeCustomDialog(this.addDavDialogId)
  1531. },
  1532. onConfirm: (account: WebDavAccount) => {
  1533. this.getUIContext().getPromptAction().closeCustomDialog(this.addDavDialogId)
  1534. if (isEditMode && account?.id) {
  1535. // 编辑模式:更新现有账户
  1536. this.webdavManager.editAccount(account).then(() => {
  1537. ToastUtil.showToast('修改成功')
  1538. // 重新加载网盘账户列表,观察着模式去更新了,所以这里不需要更新,先注释掉
  1539. // this.loadWebDavAccounts()
  1540. LogUtil.info('heanup NewIndex', '网盘账户修改成功:', account.name)
  1541. }).catch((error: Error) => {
  1542. LogUtil.error('heanup NewIndex', `修改网盘账户失败: ${error.message}`)
  1543. ToastUtil.showToast('修改失败')
  1544. })
  1545. } else {
  1546. // 添加模式:创建新账户
  1547. this.webdavManager.insertAccount(
  1548. account.name,
  1549. account.host,
  1550. account.localHost,
  1551. account.isUseLocalHost,
  1552. account.port,
  1553. account.filepath,
  1554. account.lyricFilePath,
  1555. account.uploadFilePath,
  1556. account.imageFilePath,
  1557. account.account,
  1558. account.password,
  1559. account.enableHttps,
  1560. account.coverPath,
  1561. account.webType,
  1562. account.smbShare,
  1563. account.smbDomain,
  1564. account.navidromeBasePath
  1565. ).then(() => {
  1566. ToastUtil.showToast('添加成功')
  1567. // 重新加载网盘账户列表 观察着模式去更新了,所以这里不需要更新,先注释掉
  1568. // this.loadWebDavAccounts()
  1569. LogUtil.info('heanup NewIndex', '网盘账户添加成功:', account.name)
  1570. }).catch((error: Error) => {
  1571. LogUtil.error('heanup NewIndex', `添加网盘账户失败: ${error.message}`)
  1572. ToastUtil.showToast('添加失败')
  1573. })
  1574. }
  1575. }
  1576. });
  1577. }
  1578. }
  1579. // 1. 工具函数:将 #RRGGBB 字符串和透明度转为 'rgba(r,g,b,a)' 字符串,深色模式下可返回深色变体
  1580. function themeColorWithAlpha(themeColor: string, alpha: number, isDarkMode: boolean = false): string {
  1581. if (isDarkMode) {
  1582. // 深色模式下返回更深的灰色或半透明黑色
  1583. return `rgba(34,34,34,${alpha + 0.2 > 1 ? 1 : alpha + 0.2})`;
  1584. }
  1585. const color = themeColor.replace('#', '');
  1586. const r = parseInt(color.substring(0, 2), 16);
  1587. const g = parseInt(color.substring(2, 4), 16);
  1588. const b = parseInt(color.substring(4, 6), 16);
  1589. return `rgba(${r},${g},${b},${alpha})`;
  1590. }
  1591. // 定义接口
  1592. interface HiCarAspectRatio {
  1593. context: Context;
  1594. playlistId: string;
  1595. }